vue3響應式Object代理對象的讀取示例詳解
正文
從這一章開始，作者將更新深入的講解響應式，尤其是vue3響應式的具體的實現。其實在前面一章，如果你仔細閱讀，你是可以實現一個簡單的響應式函數的，類似于@vue/reactive,當然那只是個demo，是個玩具，我能不能在生產環(huán)境上去使用的，它差了太多功能和邊界條件。
現在，我們才是真正的深入@vue/reactive。
在vue中，obj.a是一個讀取操作，但是仔細想來，讀取這個操作很寬泛。
obj.a // 訪問一個屬性 'a' in obj // 判斷對象或者原型鏈上是否存在a for ... in //循環(huán)遍歷對象 for ... of //循環(huán)遍歷數組
書中并沒有些for...of，但我覺得這個應該也屬于讀取操作，它在js內部的實現估計應該和for...in很相似。
讀取屬性
其實這個我們之前已經實現過來，就是通過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操作符的運算結果是通過一個HasProperty方法讀取的
而這個方法對應的在Proxy內部，就是has方法。
因此我們只需要增加has攔截即可,同事對于Reflect,也有has方法。
for ... in
這塊會比前面稍微復雜一點 通過查詢ECMA文檔,在這篇文章里，規(guī)定了如何把一個對象轉變?yōu)橐粋€迭代器，這里寫了一個demo，我們可以很清晰的發(fā)現，它遍歷了Reflect.ownKeys(obj)
const ITERATE_KEY=symbol()
const p = new Proxy(obj,{
ownKeys(target){
track(target,ITERATE_KEY)
return Reflect.ownKeys(target)
}
}
由于ownKeys的入參里只有target，因此我們構造一個唯一值ITERATE_KEY作為追蹤依賴的key.這里還有一個小坑，后續(xù)我們在set的時候再看
看這篇文章其實比較費勁，因為作者大量引用了ECMA-262的文檔，我以前從不看這個，也是第一次知道。其實這個才是最權威的JS文檔，所有的JS的定義、行為規(guī)范，每個函數應該怎么樣執(zhí)行，以后也建議大家沒事看看這個文檔。 tc39.es/ecma262/mul…
以上就是vue3響應式Object代理對象的讀取示例詳解的詳細內容，更多關于vue響應式Object讀取的資料請關注腳本之家其它相關文章！
相關文章
發(fā)中會有要獲取當前日期的需求,有的是獲取到當前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當前時間是一項常見的需求,本文將深入探討Vue獲取當前系統(tǒng)日期(年月日),幫助您更好地利用當前時間,需要的朋友可以參考下2024-01-01
小編在開發(fā)使經常會碰到全局切換問題，今天小編給大家?guī)硪黄坛探o大家介紹vue 全局環(huán)境切換問題，感興趣的朋友一起看看吧2019-10-10
vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue 頁面權限控制和登陸驗證功能的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇vue 實現強制類型轉換 數字類型轉為字符串，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了關于Vue?CLI3中啟動cli服務參數說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 路由懶加載，當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載，這便是vue 路由懶加載，接下來隨小編一起進入文章了解更多詳細內容吧2021-10-10
這篇文章主要為大家詳細介紹了vue實現列表的添加點擊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關于vuex安裝失敗解決的方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue綁定設置屬性的多種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08