vue的object資料偵測

2021-10-10 09:13:50 字數 1008 閱讀 8142

vue中把vm.$data作為乙個object進行偵測(observe類),乙個物件對應乙個observe例項,監測裡面的每乙個屬性值。但是由於js的限制,不能監測如下內容:

利用索引直接設定乙個陣列項

修改陣列的長度

物件屬性的新增或刪除

在observe類中,遍歷所有屬性

walk (obj: object)
在definereactive(obj,key[i])中為每乙個屬性生成乙個依賴管理器(dep類)

const dep = new dep()  //例項化乙個依賴管理器,生成乙個依賴管理陣列dep

object.defineproperty(obj, key, ,

set(newval)

val = newval;

dep.notify() // 在setter中通知依賴更新

}})

其中:

object.defineproperty()方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性,並返回此物件。在上面的方法中寫了get和set方法。

在watcher類裡,訪問每乙個屬性時,會把本watcher例項加入到dep陣列中,當某乙個vm$data裡的屬性更新時,會執行observe例項的set方法,執行dep.notify()方法,遍歷該屬性的所有依賴watcher例項,執行例項的updete()方法,然後更新對應的檢視。

export default class watcher 

get ()

update ()

}

get()方法把例項化的watcher賦給全域性變數window.target,然後在呼叫資料的observe中的get()方法,然後通過dev的depend()方法把本例項放入dev陣列中。

depend () 

}

Vue物件的Object的變化偵測

恢復內容開始 1 什麼是變化偵測 vue.js會自動通過狀態生成dom,並輸出到頁面上進行顯示,這過程稱為渲染,當狀態發生變化時vue能立刻感知到哪些狀態改變了,並進行更新 2.如何追蹤狀態變化 js裡面偵測物件的變化有兩種,一種是object.defineproperty和es6的proxy fu...

vue原始碼之變化偵測

vue的最大特點之一就是資料驅動檢視,什麼是資料驅動檢視,簡單來說就是資料變化引起檢視變化。使得object資料實現 可觀測 object建構函式提供了defineproperty方法使資料 可觀測 1 object.defineproperty 該方法允許精確地新增或修改物件的屬性。通過賦值操作新...

資料型別 Object

object 例項和 object 原型物件 object.prototype 的方法 可以通過new object object.create 方法,或者使用字面量標記 初始化標記 初始化物件。乙個物件初始化器,由花括號 大括號 包含的乙個由零個或多個物件屬性名和其關聯值組成的乙個逗號分隔的列表構...