isRef()
顧名思義,判斷一個(gè)值是否為ref類型
unref()
解除ref的包裹趁尼,即如果參數(shù)是ref剩蟀,則返回內(nèi)部值舷夺,否則返回值本身
toRefs()
const fooRef = ref(state.foo)
請(qǐng)注意苦酱,上面這個(gè) ref 不會(huì)和 state.foo
保持同步,因?yàn)檫@個(gè)ref()
接收到的是一個(gè)純數(shù)值给猾。
toRef()
這個(gè)函數(shù)在你想把一個(gè) prop 的 ref 傳遞給一個(gè)組合式函數(shù)時(shí)會(huì)很有用:
toValue
將
ref
或getter
規(guī)范化為值疫萤。如果參數(shù)是ref,它會(huì)返回ref的值敢伸;如果參數(shù)是函數(shù)扯饶,它會(huì)調(diào)用函數(shù)并返回其返回值。否則,將會(huì)原樣返回參數(shù)尾序。
這是官方組合式函數(shù)中的一個(gè)例子:
toRefs()
將一個(gè)響應(yīng)式對(duì)象轉(zhuǎn)化為一個(gè)普通對(duì)象钓丰,而這個(gè)普通對(duì)象的屬性將會(huì)被轉(zhuǎn)化為ref,相當(dāng)于對(duì)每個(gè)屬性都使用了
toRef()
當(dāng)從組合式函數(shù)中返回響應(yīng)式對(duì)象時(shí)每币,toRefss()
相當(dāng)有用斑粱。使用它,消費(fèi)者組件可以解構(gòu)/展開返回的對(duì)象而不會(huì)失去響應(yīng)性:
isProxy()
檢查一個(gè)對(duì)象是否是由
reactive()
脯爪、readonly()
、shallowReactive()
或shallowReadonly
創(chuàng)建的代理矿微。
isReactive()
檢查一個(gè)對(duì)象是否是由
reactive()
或shallowReactive()
創(chuàng)建的代理痕慢。
isReadonly()
檢查傳入的值是否為只讀對(duì)象。只讀對(duì)象的屬性可以更改涌矢,但他們不能通過傳入的對(duì)象直接賦值掖举。
通過readonly()
和shallowReadonly()
創(chuàng)建的代理都是只讀的,因?yàn)樗麄兪菦]有set
函數(shù)的computed()
ref娜庇。
shallowRef()
常常用于對(duì)大型數(shù)據(jù)解構(gòu)的性能優(yōu)化或是與外部的狀態(tài)管理系統(tǒng)集成塔次。
triggerRef()
強(qiáng)制觸發(fā)依賴于一個(gè)
淺層ref()
的副作用,這通常在對(duì)潛引用的內(nèi)部值進(jìn)行深度變更后使用名秀。
customRef()
創(chuàng)建一個(gè)自定義的ref励负,顯式聲明對(duì)其依賴追蹤和更新觸發(fā)的控制方式。
customRef() 預(yù)期接收一個(gè)工廠函數(shù)作為參數(shù)匕得,這個(gè)工廠函數(shù)接受 track 和 trigger 兩個(gè)函數(shù)作為參數(shù)继榆,并返回一個(gè)帶有 get 和 set 方法的對(duì)象。
一般來說汁掠,track() 應(yīng)該在 get() 方法中調(diào)用略吨,而 trigger() 應(yīng)該在 set() 中調(diào)用。然而事實(shí)上考阱,你對(duì)何時(shí)調(diào)用翠忠、是否應(yīng)該調(diào)用他們有完全的控制權(quán)。
示例:創(chuàng)建一個(gè)防抖ref
shallowReactive()
一個(gè)淺層響應(yīng)式對(duì)象里只有根級(jí)別的屬性是響應(yīng)式的乞榨。屬性的值會(huì)被原樣存儲(chǔ)和暴露秽之,這也意味著值為ref的屬性不會(huì)被自動(dòng)解包了。
shallowReadonly()
readonly()
的淺層作用形式
和readonly()
不同姜凄,這里沒有深層級(jí)的轉(zhuǎn)換:只有根層級(jí)的屬性變?yōu)榱酥蛔x政溃。屬性的值都會(huì)被原樣存儲(chǔ)和暴露,這也意味著值為ref的屬性不會(huì)被自動(dòng)解包态秧。
toRaw()
根據(jù)一個(gè)Vue創(chuàng)建的代理返回其原始對(duì)象
markRaw()
將一個(gè)對(duì)象轉(zhuǎn)為不可被轉(zhuǎn)為代理董虱。
effectScope
創(chuàng)建一個(gè)effect作用域,可以捕獲其中所創(chuàng)建的響應(yīng)式副作用(即計(jì)算屬性和幀聽器),這樣捕獲到的副作用可以一起處理愤诱。
getCurrentScope()
如果有的話云头,返回當(dāng)前活躍的effect作用域。
onScopeDispose()
在當(dāng)前活躍的effect作用域上注冊(cè)一個(gè)處理回調(diào)函數(shù)淫半。當(dāng)相關(guān)的 effect 作用域停止時(shí)會(huì)調(diào)用這個(gè)回調(diào)函數(shù)溃槐。
這個(gè)方法可以作為可復(fù)用的組合式函數(shù)中 onUnmounted 的替代品,它并不與組件耦合科吭,因?yàn)槊恳粋€(gè) Vue 組件的 setup() 函數(shù)也是在一個(gè) effect 作用域中調(diào)用的昏滴。
mixins
意為混入,可以使用可復(fù)用的代碼
- 基本使用
如果組件和mixins有重復(fù)數(shù)據(jù)对人,mixins中的數(shù)據(jù)會(huì)被覆蓋谣殊。
- 全局引用
render函數(shù)
我的理解就是手動(dòng)創(chuàng)建界面元素
- 基本使用
同樣能看到效果
ref
通過
ref
獲取DOM元素
如果用于普通DOM元素,引用將是元素本身牺弄;如果用于子組件姻几,引用將是子組件的實(shí)例。父組件往往可以通過ref
訪問子組件暴露的數(shù)據(jù)势告。
或者ref
可以接收一個(gè)函數(shù)值蛇捌,用于對(duì)存儲(chǔ)引用位置的完全控制:
<ChildComponent :ref="(el) => child = el" />
關(guān)于ref注冊(cè)時(shí)機(jī)的重要說明:因?yàn)閞ef本身是作為渲染函數(shù)的結(jié)果來創(chuàng)建的,必須等待組件掛載后才能對(duì)它進(jìn)行訪問咱台。調(diào)用方式"ref名.value.子組件暴露的屬性"
this.$refs
也是非響應(yīng)式的络拌,因此不應(yīng)該在模板中使用它來進(jìn)行數(shù)據(jù)綁定。