ref（）和reactive（）之間的主要區(qū)別是什么？什么時(shí)候使用一個(gè)或另一個(gè)？讓我們一起在文章中找到答案。1.基元值ref（）和reactive（）處理不同的基元值：字符串、數(shù)字、布爾值、null和undefined。1.1 ref（）refs（）存儲基元值和對象：

在上面的例子中，ref（0）創(chuàng)建了一個(gè)存儲基元值的ref。同樣，ref（｛count：0｝）創(chuàng)建了一個(gè)存儲純JavaScript對象的ref。1.2 reactive（）另一方面，reactive（）不存儲基元，而只存儲對象：

使用基元值調(diào)用reactive（0）是不正確的。如果您需要生成反應(yīng)基元值，那么ref（0）就是一種方法。reactive（）只適用于對象的原因是Vue的reactive實(shí)現(xiàn)。Vue使用代理截取對象的屬性更改。代理不適用于基元。盡管如此，用對象初始化的reactive（｛count：0｝）是完全有效的，并創(chuàng)建了一個(gè)reactive對象?？偨Y(jié)：ref（）可以存儲基元值，而reactive（）不能。2.訪問無功數(shù)據(jù)第二個(gè)區(qū)別是如何訪問存儲在ref（）和reactive（）中的數(shù)據(jù)。2.1 ref（）ref（）數(shù)據(jù)，無論是基元值還是對象，都是通過一個(gè)特殊屬性訪問的。value：

numberRef.value是從引用numberRef訪問基元值的方式。＜ref＞.value是所有ref上可用的特殊屬性，用于讀取或更新ref值。此外，objectRef.value.count是如何訪問引用中對象的屬性的。請注意，在模板內(nèi)部，您不必使用.value來訪問ref值：它們是自動(dòng)展開的。

在插值｛｛numberRef｝｝中，ref是自動(dòng)展開的。2.2 reactive（）另一方面，reactive（）數(shù)據(jù)是直接訪問的：

訪問使用reactive（｛count：0｝）創(chuàng)建的reactive數(shù)據(jù)不需要額外的語法，而是直接完成的：objectReactive.count。reactive（originalObject）返回的reactive對象是originalObject的代理對象。這意味著反應(yīng)對象具有與原始對象相同的屬性（也就是具有相同的接口）?？偨Y(jié)：ref（）數(shù)據(jù)使用value屬性訪問（異常：在模板中，ref是自動(dòng)展開的），而reactive（）數(shù)據(jù)則直接訪問。3.重新分配數(shù)據(jù)ref（）是使用.value屬性訪問和更新的，而reactive（）是原始對象的代理。因此，ref（）可以重新分配給一個(gè)新對象，而reactive（）不能。ref（）將ref（）的值完全重新分配為新值是完全有效的：

在掛載后完全替換ref值objectRef.value＝｛count：1｝反映在輸出中。保持反應(yīng)性。reactive（）但是，完全重新分配reactive（）對象是不可能的：

安裝后完全替換反應(yīng)對象值objectReactive={count:1}并沒有反映在輸出中。這樣做會破壞objectReactive的反應(yīng)性?？偨Y(jié)：ref（）值可以完全重新分配給一個(gè)新對象，而reactive（）不能。4.類型化ref（）通過.value屬性訪問ref數(shù)據(jù)的一個(gè)直接后果是如何鍵入ref。要注釋引用，您需要使用特殊類型的引用，可從vue庫導(dǎo)入：

Ref＜number＞是一種類型，表示持有數(shù)字的Ref。例如，如果要將ref指定為可組合的ref數(shù)，請確保使用ref＜V＞類型（其中V是值的類型）來注釋refref數(shù)：

reactive（）另一方面，reactive（）返回的reactive數(shù)據(jù)被類型化為初始對象：

reactive（｛count:0｝）返回類型為｛count:number｝的對象。反應(yīng)對象通常保持原始對象的類型。但有一個(gè)例外——如果反應(yīng)對象包含引用，那么這些引用將被展開。

即使反應(yīng)對象是{count:ref（0）}，返回的類型仍然是{count:number}。這一切都是因?yàn)閞eactive（）會自動(dòng)打開在reactive對象中找到的refs。總結(jié)：ref返回的ref（值：T）的類型為ref<T>，而reactive返回的reactive對象（對象：T）為T類型（異常：reactive中的ref被展開）。5.監(jiān)視watch（）監(jiān)視反應(yīng)數(shù)據(jù)的變化。ref（）和reactive（）的watch（）的默認(rèn)行為不同。ref（）watch（）確定ref的.value屬性是否已更改：

每次單擊“增加”按鈕，您都會在控制臺中看到消息“已更改！”。watch（count，callback）在每次countNumberRef.value更改時(shí)調(diào)用callback。但是watch（）是否監(jiān)視存儲在ref（）中的對象的深層變化？

然而，這一次，如果您單擊“增加”按鈕，控制臺中將不會出現(xiàn)任何消息！結(jié)論是watch（）默認(rèn)情況下不會深入觀察refs。然而，當(dāng)countObjectRef.value.count發(fā)生變化時(shí)，DOM仍然會更新：這意味著ref中的對象對于渲染的輸出仍然是被動(dòng)的。當(dāng)然，如果你讓watch（）深入觀察裁判，它的工作原理是完全深入觀察：

reactive（）在監(jiān)視反應(yīng)對象的情況下，watch（）始終執(zhí)行深度監(jiān)視（即使您沒有指示{deep:true}）選項(xiàng)。

每次單擊“增加”按鈕，您都會在控制臺中看到消息“已更改！”。每當(dāng)countObjectReactive的任何屬性（甚至是深層屬性）發(fā)生變化時(shí)，watch（countObjectReactor，callback）都會調(diào)用callback?？偨Y(jié)：watch（）默認(rèn)情況下只監(jiān)視r(shí)ef（）的直接.value更改，同時(shí)對reactive（）對象進(jìn)行深度監(jiān)視。6.用途雖然沒有嚴(yán)格的規(guī)則，但在某些情況下，使用特定的反應(yīng)性函數(shù)是可取的：

1.如果您需要一個(gè)反應(yīng)基元值，那么使用ref（）是正確的選擇。2.如果您需要一個(gè)反應(yīng)值對象（一個(gè)屬性通常不變的對象），那么使用ref（）是一個(gè)不錯(cuò)的選擇。3.如果您需要一個(gè)反應(yīng)式可變對象，并且希望跟蹤該對象的深度變異屬性，那么使用reactive（）是一個(gè)不錯(cuò)的選擇。7.總結(jié)這篇文章介紹了組合API中ref（）和reactive（）之間的差異：1.ref（）可以存儲基元值，而reactive（）不能。2.您可以使用<ref>.value訪問存儲在ref（）中的值，而reactive（）對象可以直接用作常規(guī)對象。3.ref（）值可以重新分配給一個(gè)全新的對象，而reactive（）不能。4.ref（）類型為ref＜V＞，而反應(yīng)對象返回

最后向大家推薦一項(xiàng)實(shí)用的內(nèi)容：使用Vue組合API對項(xiàng)目開發(fā)有很大的幫助，但有時(shí)很有挑戰(zhàn)性。VUE3.0從實(shí)戰(zhàn)到源碼全剖析技術(shù)實(shí)戰(zhàn)課程中涵蓋了reactive、ref的運(yùn)行原理，主要幫助學(xué)員掌握Vue3.0的核心特性，讓學(xué)員在3天的集中學(xué)習(xí)中掌握前端工程師的Vue必會技能！歡迎私信咨詢！