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

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

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

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

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

抵觸 reactive 的人

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

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

抵觸 ref 的人

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

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

把我整笑了~

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

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

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

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

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

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

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

靈活使用 Vue3 API 才是王道

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

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

readonly

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

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

shallowRef

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

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

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

shallowReactive

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

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

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

toRef & toRefs

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

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

但是如果是屬性太多了，我們想一個(gè)一個(gè)去用 toRef 的話(huà)會(huì)寫(xiě)很多代碼

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

toRaw & markRaw & unref

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

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

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

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

effectScope & onScopeDispose

effectScope 可以有兩個(gè)作用：

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

收集副作用

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

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

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

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

全局狀態(tài)管理

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

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

vueuse 中的 createGlobalState 就是為了這個(gè)而生

provide & inject

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