Vue 雙向數繫結原理 筆記

2021-10-10 03:55:52 字數 413 閱讀 9514

使用 object.defineproperty 進行資料劫持,把 data 物件、computed 等裡的所有屬性進行資料劫持

使用觀察者模式,完成發布訂閱。

模板裡使用 data 物件屬性的 dom 物件都訂閱

當 data 物件裡面的屬性的值發生變化時,就會發布,發布時就改變了 dom 裡的內容

偵測資料的變化 → 收集檢視依賴了哪些資料 → 資料變化時,自動「同質化」需要更新的檢視部分,並更新;

對應專業術語:資料劫持/資料** → 依賴收集 → 發布訂閱模式

js偵測物件變化: object.defineproperty(設定物件屬性 setter/getter 監聽)、es6 的 proxy

訂閱者 dep → 收集、刪除、向 依賴傳送訊息等

觀察者 watch → 觀察訂閱依賴

vue雙向繫結原理

大家知道vue的雙向繫結原理是利用object.defineproperty 這一方法,以下是我研究該方法的一些內容 語法 object.defineproperty obj,prop,descriptor descriptor是將被定義或修改的屬性描述符,而雙向繫結是利用get和set屬性描述符。...

Vue雙向繫結原理

vue實現資料雙向繫結的原理就是用object.defineproperty 重新定義 set方法 物件設定屬性值和 get方法 獲取屬性值的操縱來實現的 object.property 方法的解釋 object.property 引數1,引數2,引數3 返回值為該物件obj 其中引數1為該物件 o...

vue雙向繫結原理

vue資料雙向繫結是通過資料劫持結合發布者 訂閱者模式來實現的。首先要對資料進行劫持監聽,所以需要設定乙個 observer,用來監聽所有的屬性。如果屬性發生了變化,就要告訴訂閱者watcher看是否需要更新,因為訂閱者很多,所以我們需要有乙個訊息訂閱器容器dep專門收集訂閱者,然後在 observ...