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

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

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

正文

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

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

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

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

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

讀取屬性

其實這個我們之前已經(jīng)實現(xiàn)過來，就是通過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

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

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

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

for ... in

這塊會比前面稍微復(fù)雜一點通過查詢ECMA文檔,在這篇文章里，規(guī)定了如何把一個對象轉(zhuǎn)變?yōu)橐粋€迭代器，這里寫了一個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)造一個唯一值ITERATE_KEY作為追蹤依賴的key.這里還有一個小坑，后續(xù)我們在set的時候再看

看這篇文章其實比較費勁，因為作者大量引用了ECMA-262的文檔，我以前從不看這個，也是第一次知道。其實這個才是最權(quán)威的JS文檔，所有的JS的定義、行為規(guī)范，每個函數(shù)應(yīng)該怎么樣執(zhí)行，以后也建議大家沒事看看這個文檔。 tc39.es/ecma262/mul…

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

您可能感興趣的文章: