大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

今天給大家分享幾個(gè)很少人用，但是又非常有用的 Vue3 的 API，廢話不多說，往下看吧！

文章提示：下文的無效 不觸發(fā)視圖 不觸發(fā)響應(yīng)式更新 不被追蹤 這些詞匯，想表達(dá)的意思是一樣的，意思都是 不被追蹤

readonly

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

圖片

圖片

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

圖片

shallowRef

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

圖片

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

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

圖片

shallowReactive

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

注意：改深層屬性能改數(shù)據(jù)，只是沒觸發(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

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

圖片

圖片

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

圖片

圖片

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

圖片

所以我們可以使用 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 可以用來標(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)一收集副作用，并且在組件銷毀的時(shí)候去統(tǒng)一消除，比如以下代碼：

圖片

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

圖片

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

圖片

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

圖片

全局狀態(tài)管理

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

圖片

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

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

圖片

圖片

provide & inject

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

圖片