大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

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

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

readonly

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

圖片

圖片

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

圖片

shallowRef

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

圖片

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

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

圖片

shallowReactive

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

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

圖片

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

toRef & toRefs

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

圖片

圖片

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

圖片

圖片

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

圖片

所以我們可以使用 toRefs 一次性解構。

toRaw & markRaw & unref

toRaw 可以把一個響應式 reactive 轉成普通對象，也就是把響應式對象轉成非響應式對象。

圖片

toRaw 主要用在回調傳參中，比如我封裝一個 hooks，我想要把 hooks 內維護的響應式變量轉成普通數(shù)據(jù)，當做參數(shù)傳給回調函數(shù)，可以用 toRaw。

圖片

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

圖片

unref 相當于返回 ref 的 value。

圖片

effectScope & onScopeDispose

effectScope 可以有兩個作用：

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

收集副作用

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

圖片

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

圖片

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

圖片

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

圖片

全局狀態(tài)管理

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

圖片

所以我們完全可以自己使用 effectScope 來實現(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 來實現(xiàn)的，比如 Form、Form-Item、Input這三個需要互相依賴對方的規(guī)則、字段名、字段值，所以用 provide & inject 會更好。具體用法看文檔吧~https://cn.vuejs.org/guide/components/provide-inject.html

圖片