vue3響應式Object代理對象的讀取示例詳解

Posted on by

正文

從這一章開始，作者將更新深入的講解響應式，尤其是vue3響應式的具體的實現。其實在前面一章，如果你仔細閱讀，你是可以實現一個簡單的響應式函數的，類似於@vue/reactive,當然那隻是個demo，是個玩具，我能不能在生產環境上去使用的，它差瞭太多功能和邊界條件。

現在，我們才是真正的深入@vue/reactive。

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

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

書中並沒有些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文檔,在這篇文章裡，規定瞭如何把一個對象轉變為一個迭代器，這裡寫瞭一個demo，我們可以很清晰的發現，它遍歷瞭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.這裡還有一個小坑，後續我們在set的時候再看

看這篇文章其實比較費勁，因為作者大量引用瞭ECMA-262的文檔，我以前從不看這個，也是第一次知道。其實這個才是最權威的JS文檔，所有的JS的定義、行為規范，每個函數應該怎麼樣執行，以後也建議大傢沒事看看這個文檔。 tc39.es/ecma262/mul…

以上就是vue3響應式Object代理對象的讀取示例詳解的詳細內容，更多關於vue響應式Object讀取的資料請關註WalkonNet其它相關文章！

推薦閱讀：