Find N3入網：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經正式入網，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
今天給大家分享幾個很少人用，但是又非常有用的 Vue3 的 API，廢話不多說，往下看吧。
文章提示：下文的無效 不觸發視圖 不觸發響應式更新 不被追蹤 這些詞匯，想表達的意思是一樣的，意思都是不被追蹤。
顧名思義，就是只讀的意思，如果你的數據被這個 API 包裹住的話，那么修改之后并不會觸發響應式，并且會提示警告：
readonly 的用途一般用于一些 hooks 暴露出來的變量，不想外界去修改，比如我封裝一個 hooks，這樣去做的話，那么外界只能用變量，但是不能修改變量，這樣大大保護了 hooks 內部的邏輯：
shallowRef 用來包住一個基礎類型或者引用類型，如果是基礎類型那么跟 ref 基本沒區別，如果是引用類型的話，那么直接改深層屬性是不能觸發響應式的，除非直接修改引用地址，如下：
注意：改深層屬性能改數據，只是沒觸發響應式，所以當下一次響應式觸發的時候，你修改的深層數據會渲染到頁面上。
shallowRef 的用處主要用于一些比較大的但又變化不大的數據，比如我有一個表格數據，通過接口直接獲取，并且主要用在前端展示，需要修改一些深層的屬性，但是這些屬性并不需要立即表現在頁面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要計算 isOld 但是又不想觸發響應式更新，所以可以用 shallowRef 包起來，進而減少響應式更新，優化性能。
shallowReactive 用來包住一個引用類型，被包住后，修改第一層才會觸發響應式更新，也就是淺層的屬性，修改深層的屬性并不會觸發響應式更新。
注意：改深層屬性能改數據，只是沒觸發響應式，所以當下一次響應式觸發的時候，你修改的深層數據會渲染到頁面上：
shallowReactive 用的比較少，shallowReactive 的用處跟 shallowRef 比較像，都是為了讓一些比較大的數據能減少響應式更新，進而優化性能。
先說說 toRef 吧，我們平時在使用 reactive 的時候會有一個苦惱，那就是解構，比如看以下例子，我們為了少些一些代碼，解構出來了 name 并放到模板里渲染，但是當我們想改原數據的時候，發現 name 并不會更新，這就是解構出來基礎類型的苦惱。
這時我們可以使用 toRef，這個時候我們直接修改 name 也會觸發原數據的修改，修改原數據也會觸發 name 的修改：
但是如果是屬性太多了，我們想一個一個去用 toRef 的話會寫很多代碼：
所以我們可以使用 toRefs 一次性解構：
toRaw 可以把一個響應式 reactive 轉成普通對象，也就是把響應式對象轉成非響應式對象：
toRaw 主要用在回調傳參中，比如我封裝一個 hooks，我想要把 hooks 內維護的響應式變量轉成普通數據，當做參數傳給回調函數，可以用 toRaw：
markRaw 可以用來標記響應式對象里的某個屬性不被追蹤，如果你的響應式對象里有某個屬性數據量比較大，但又不想被追蹤，你可以使用 markRaw：
unref 相當于返回 ref 的 value：
effectScope 可以有兩個作用：
(1) 收集副作用
比如我們封裝一個共用的 hooks，為了減少頁面隱患，肯定會統一收集副作用，并且在組件銷毀的時候去統一消除，比如以下代碼：
但是這么收集很麻煩， effectScope 能幫我們做到統一收集，并且通過 stop 方法來進行清除，且 stop 執行的時候會觸發 effectScope 內部的 onScopeDispose：
我們可以利用 effectScope & onScopeDispose 來做一些性能優化，比如下面這個例子，我們封裝一個鼠標監聽的 hooks：
但是如果在頁面里調用多次的話，那么勢必會往 window 身上監聽很多多余的事件，造成性能負擔，所以解決方案就是，無論頁面里調用再多次 useMouse，我們只往 window 身上加一個鼠標監聽事件：
(2) 全局狀態管理
現在 Vue3 最火的全局狀態管理工具肯定是 Pinia 了，那么你們知道 Pinia 的原理是什么嗎？原理就是依賴了 effectScope：
所以我們完全可以自己使用 effectScope 來實現自己的局部狀態管理，比如我們封裝一個通用組件，這個組件層級比較多，并且需要共享一些數據，那么這個時候肯定不會用 Pinia 這種全局狀態管理，而是會自己寫一個局部的狀態管理，這個時候 effectScope 就可以排上用場了。
vueuse 中的 createGlobalState 就是為了這個而生：
Vue3 用來提供注入的 API，主要是用在組件的封裝，比如那種層級較多的組件，且子組件需要依賴父組件甚至爺爺組件的數據，那么可以使用 provide & inject，最典型的例子就是 Form 表單組件，可以去看看各個組件庫的源碼，表單組件大部分都是用 provide & inject 來實現的，比如 Form、Form-Item、Input這三個需要互相依賴對方的規則、字段名、字段值，所以用 provide & inject 會更好。具體用法看文檔吧~https://cn.vuejs.org/guide/components/provide-inject.html：
本文鏈接：http://www.www897cc.com/showinfo-26-62789-0.html總結了十個Vue3超級實用但是很冷門的API
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號