這幾天看到好多文章標(biāo)題都是類似于：

• 不用 ref 的 xx 個理由
• 不用 reactive 的 xx 個理由
• 歷數(shù) ref 的 xx 宗罪

我就很不解，到底是什么原因?qū)е掠羞@兩批人：

• 抵觸 ref 的人
• 抵觸 reactive 的人

看了這些文章，我可以總結(jié)出他們的想法

抵觸 reactive 的人

抵觸 reactive 的人，他們的想法大概就是：

• 1、Vue 官方推薦 ref
• 2、reactive 有類型限制，ref 沒有
• 3、reactive 使用不當(dāng)會丟失響應(yīng)式，比如解構(gòu)
• 4、reactive 無法修改整個對象的值

抵觸 ref 的人

抵觸 ref 的人，他們的想法大概就是：

• 1、ref 的底層其實(shí)就是 reactive，用 ref 相當(dāng)于多了一層，耗費(fèi)性能
• 2、ref 的 .value 用起來很麻煩，增加使用者心里負(fù)擔(dān)
• 3、ref 到模板的時候會解掉 value 這一層，這時候也會耗費(fèi)性能

把我整笑了~

說實(shí)話，看到這些文章，有點(diǎn)把我整笑了，其實(shí)你要用 ref 或者 reactive 都沒錯，但是沒比必要那么抵觸，編程很多時候并不是非黑即白啊。。。

既然 Vue3 推出了 ref 和 reactive，那就說明他們都有存在的必要，在項(xiàng)目中不同的場景去運(yùn)用他們，我覺得才是最好的，而不是用一個不用另一個，不止這兩個，還有很多其他好用的 Vue3 API

我想針對這兩批人的想法做一個回應(yīng)：

回應(yīng) -> 抵觸 reactive 的人

• 1、官方是推薦，不是抵觸
• 2、reactive 既然有類型限制，那就在特定時候用 reactive 就行
• 3、使用不當(dāng)會丟失響應(yīng)式？那就是開發(fā)者對于 Vue3 API 的使用還不熟
• 4、用 Object.assign 就可以修改整個對象的值

回應(yīng) -> 抵觸 ref 的人

• 1、耗費(fèi)性能的話，這么久了，也沒人貼出到底耗費(fèi)了多少性能？
• 2、.value 不麻煩，我覺得 .value 可以起到辨別響應(yīng)式和非響應(yīng)式數(shù)據(jù)的效果，而且現(xiàn)在編輯器都有插件提供的代碼補(bǔ)全了，多個 .value 也花不了多少時間吧？

靈活使用 Vue3 API 才是王道

其實(shí)在平時開發(fā)中，我覺得基本數(shù)據(jù)類型和數(shù)組，都可以用 ref 來管理，而對象的話可以使用 reactive 來管理，比如表單對象、狀態(tài)對象

其實(shí) Vue3 不止有這兩個 API ，還有很多其他 API ，也很好用，大家只要去靈活使用它們，能讓你的Vue3 項(xiàng)目上一個層次

readonly

顧名思義，就是只讀的意思，如果你的數(shù)據(jù)被這個 API 包裹住的話，那么修改之后并不會觸發(fā)響應(yīng)式，并且會提示警告

readonly 的用途一般用于一些 hooks 暴露出來的變量，不想外界去修改，比如我封裝一個 hooks，這樣去做的話，那么外界只能用變量，但是不能修改變量，這樣大大保護(hù)了 hooks 內(nèi)部的邏輯~

shallowRef

shallowRef 用來包住一個基礎(chǔ)類型或者引用類型，如果是基礎(chǔ)類型那么跟 ref 基本沒區(qū)別，如果是引用類型的話，那么直接改深層屬性是不能觸發(fā)響應(yīng)式的，除非直接修改引用地址，如下：

注意：改深層屬性能改數(shù)據(jù)，只是沒觸發(fā)響應(yīng)式，所以當(dāng)下一次響應(yīng)式觸發(fā)的時候，你修改的深層數(shù)據(jù)會渲染到頁面上~

shallowRef 的用處主要用于一些比較大的但又變化不大的數(shù)據(jù)，比如我有一個表格數(shù)據(jù)，通過接口直接獲取，并且主要用在前端展示，需要修改一些深層的屬性，但是這些屬性并不需要立即表現(xiàn)在頁面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要計算 isOld 但是又不想觸發(fā)響應(yīng)式更新，所以可以用 shallowRef 包起來，進(jìn)而減少響應(yīng)式更新，優(yōu)化性能

shallowReactive

shallowReactive 用來包住一個引用類型，被包住后，修改第一層才會觸發(fā)響應(yīng)式更新，也就是淺層的屬性，修改深層的屬性并不會觸發(fā)響應(yīng)式更新

注意：改深層屬性能改數(shù)據(jù)，只是沒觸發(fā)響應(yīng)式，所以當(dāng)下一次響應(yīng)式觸發(fā)的時候，你修改的深層數(shù)據(jù)會渲染到頁面上~

shallowReactive 用的比較少，shallowReactive 的用處跟 shallowRef 比較像，都是為了讓一些比較大的數(shù)據(jù)能減少響應(yīng)式更新，進(jìn)而優(yōu)化性能

toRef & toRefs

先說說 toRef 吧，我們平時在使用 reactive 的時候會有一個苦惱，那就是解構(gòu)，比如看以下例子，我們?yōu)榱松傩┮恍┐a，解構(gòu)出來了 name 并放到模板里渲染，但是當(dāng)我們想改原數(shù)據(jù)的時候，發(fā)現(xiàn) name 并不會更新，這就是解構(gòu)出來基礎(chǔ)類型的苦惱

這時我們可以使用 toRef，這個時候我們直接修改 name 也會觸發(fā)原數(shù)據(jù)的修改，修改原數(shù)據(jù)也會觸發(fā) name 的修改

但是如果是屬性太多了，我們想一個一個去用 toRef 的話會寫很多代碼

所以我們可以使用 toRefs 一次性解構(gòu)

toRaw & markRaw & unref

toRaw 可以把一個響應(yīng)式 reactive 轉(zhuǎn)成普通對象，也就是把響應(yīng)式對象轉(zhuǎn)成非響應(yīng)式對象

toRaw 主要用在回調(diào)傳參中，比如我封裝一個 hooks，我想要把 hooks 內(nèi)維護(hù)的響應(yīng)式變量轉(zhuǎn)成普通數(shù)據(jù)，當(dāng)做參數(shù)傳給回調(diào)函數(shù)，可以用 toRaw

markRaw 可以用來標(biāo)記響應(yīng)式對象里的某個屬性不被追蹤，如果你的響應(yīng)式對象里有某個屬性數(shù)據(jù)量比較大，但又不想被追蹤，你可以使用 markRaw

unref 相當(dāng)于返回 ref 的 value

effectScope & onScopeDispose

effectScope 可以有兩個作用：

• 收集副作用
• 全局狀態(tài)管理

收集副作用

比如我們封裝一個共用的 hooks，為了減少頁面隱患，肯定會統(tǒng)一收集副作用，并且在組件銷毀的時候去統(tǒng)一消除，比如以下代碼：

但是這么收集很麻煩， effectScope 能幫我們做到統(tǒng)一收集，并且通過 stop 方法來進(jìn)行清除，且 stop 執(zhí)行的時候會觸發(fā) effectScope 內(nèi)部的 onScopeDispose

我們可以利用 effectScope & onScopeDispose 來做一些性能優(yōu)化，比如下面這個例子，我們封裝一個鼠標(biāo)監(jiān)聽的 hooks

但是如果在頁面里調(diào)用多次的話，那么勢必會往 window 身上監(jiān)聽很多多余的事件，造成性能負(fù)擔(dān)，所以解決方案就是，無論頁面里調(diào)用再多次 useMouse，我們只往 window 身上加一個鼠標(biāo)監(jiān)聽事件

全局狀態(tài)管理

現(xiàn)在 Vue3 最火的全局狀態(tài)管理工具肯定是 Pinia 了，那么你們知道 Pinia 的原理是什么嗎？原理就是依賴了 effectScope

所以我們完全可以自己使用 effectScope 來實(shí)現(xiàn)自己的局部狀態(tài)管理，比如我們封裝一個通用組件，這個組件層級比較多，并且需要共享一些數(shù)據(jù)，那么這個時候肯定不會用 Pinia 這種全局狀態(tài)管理，而是會自己寫一個局部的狀態(tài)管理，這個時候 effectScope 就可以排上用場了

vueuse 中的 createGlobalState 就是為了這個而生

provide & inject

Vue3 用來提供注入的 API，主要是用在組件的封裝，比如那種層級較多的組件，且子組件需要依賴父組件甚至爺爺組件的數(shù)據(jù)，那么可以使用 provide & inject，最典型的例子就是 Form 表單組件，可以去看看各個組件庫的源碼，表單組件大部分都是用 provide & inject 來實(shí)現(xiàn)的，比如 Form、Form-Item、Input這三個需要互相依賴對方的規(guī)則、字段名、字段值，所以用 provide & inject 會更好。具體用法看文檔吧~cn.vuejs.org/guide/compo…