vue3響應式Object代理對象的讀取示例詳解
正文
從這一章開始，作者將更新深入的講解響應式，尤其是vue3響應式的具體的實現(xiàn)。其實在前面一章，如果你仔細閱讀，你是可以實現(xiàn)一個簡單的響應式函數(shù)的，類似于@vue/reactive,當然那只是個demo，是個玩具，我能不能在生產(chǎn)環(huán)境上去使用的，它差了太多功能和邊界條件。
現(xiàn)在，我們才是真正的深入@vue/reactive。
在vue中，obj.a是一個讀取操作，但是仔細想來，讀取這個操作很寬泛。
obj.a // 訪問一個屬性 'a' in obj // 判斷對象或者原型鏈上是否存在a for ... in //循環(huán)遍歷對象 for ... of //循環(huán)遍歷數(shù)組
書中并沒有些for...of，但我覺得這個應該也屬于讀取操作，它在js內(nèi)部的實現(xiàn)估計應該和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操作符的運算結(jié)果是通過一個HasProperty方法讀取的
而這個方法對應的在Proxy內(nèi)部，就是has方法。
因此我們只需要增加has攔截即可,同事對于Reflect,也有has方法。
for ... in
這塊會比前面稍微復雜一點 通過查詢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ù)應該怎么樣執(zhí)行，以后也建議大家沒事看看這個文檔。 tc39.es/ecma262/mul…
以上就是vue3響應式Object代理對象的讀取示例詳解的詳細內(nèi)容，更多關于vue響應式Object讀取的資料請關注腳本之家其它相關文章！
相關文章
Vue.js 2.0和Cordova開發(fā)webApp環(huán)境搭建方法
下面小編就為大家分享一篇Vue.js 2.0和Cordova開發(fā)webApp環(huán)境搭建方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中新增了一種特殊的監(jiān)聽器watchEffect,本文主要介紹了Vue3中watchEffect高級偵聽器的具體使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06
本文主要介紹了Vue封裝遠程下拉框組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了Vue 讓元素抖動/擺動起來的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
vue結(jié)合leaflet實現(xiàn)地圖放大鏡
放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實現(xiàn)地圖放大鏡，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue 實現(xiàn)監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求
這篇文章主要介紹了Vue 實現(xiàn)監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09