快捷導(dǎo)航

vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解

更新時(shí)間：2022年08月02日 10:26:27 作者：冒菜師

這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

從這一章開(kāi)始，作者將更新深入的講解響應(yīng)式，尤其是vue3響應(yīng)式的具體的實(shí)現(xiàn)。其實(shí)在前面一章，如果你仔細(xì)閱讀，你是可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的響應(yīng)式函數(shù)的，類(lèi)似于@vue/reactive,當(dāng)然那只是個(gè)demo，是個(gè)玩具，我能不能在生產(chǎn)環(huán)境上去使用的，它差了太多功能和邊界條件。

現(xiàn)在，我們才是真正的深入@vue/reactive。

在vue中，obj.a是一個(gè)讀取操作，但是仔細(xì)想來(lái)，讀取這個(gè)操作很寬泛。

obj.a // 訪問(wèn)一個(gè)屬性
'a' in obj // 判斷對(duì)象或者原型鏈上是否存在a
for ... in //循環(huán)遍歷對(duì)象
for ... of //循環(huán)遍歷數(shù)組

書(shū)中并沒(méi)有些for...of，但我覺(jué)得這個(gè)應(yīng)該也屬于讀取操作，它在js內(nèi)部的實(shí)現(xiàn)估計(jì)應(yīng)該和for...in很相似。

讀取屬性

其實(shí)這個(gè)我們之前已經(jīng)實(shí)現(xiàn)過(guò)來(lái)，就是通過(guò)Proxy攔截Get操作.至于為什么要用Reflect，上上一篇文章也給出了原因。

const obj = {a:1}
const p = new Proxy(obj,{
    get(target,key,receiver){
        track(target,key)
        return Reflect.get(target,key,receiver)
    }
})

xx in obj

通過(guò)查詢(xún)ECMA文檔得知，in操作符的運(yùn)算結(jié)果是通過(guò)一個(gè)HasProperty方法讀取的

而這個(gè)方法對(duì)應(yīng)的在Proxy內(nèi)部，就是has方法。

因此我們只需要增加has攔截即可,同事對(duì)于Reflect,也有has方法。

for ... in

這塊會(huì)比前面稍微復(fù)雜一點(diǎn) 通過(guò)查詢(xún)ECMA文檔,在這篇文章里，規(guī)定了如何把一個(gè)對(duì)象轉(zhuǎn)變?yōu)橐粋€(gè)迭代器，這里寫(xiě)了一個(gè)demo，我們可以很清晰的發(fā)現(xiàn)，它遍歷了Reflect.ownKeys(obj)

const ITERATE_KEY=symbol()
const p = new Proxy(obj,{
 ownKeys(target){
        track(target,ITERATE_KEY)
        return Reflect.ownKeys(target)
  }
}

由于ownKeys的入?yún)⒗镏挥衪arget，因此我們構(gòu)造一個(gè)唯一值ITERATE_KEY作為追蹤依賴(lài)的key.這里還有一個(gè)小坑，后續(xù)我們?cè)趕et的時(shí)候再看

看這篇文章其實(shí)比較費(fèi)勁，因?yàn)樽髡叽罅恳昧薊CMA-262的文檔，我以前從不看這個(gè)，也是第一次知道。其實(shí)這個(gè)才是最權(quán)威的JS文檔，所有的JS的定義、行為規(guī)范，每個(gè)函數(shù)應(yīng)該怎么樣執(zhí)行，以后也建議大家沒(méi)事看看這個(gè)文檔。 tc39.es/ecma262/mul…

以上就是vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue響應(yīng)式Object讀取的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: