vue雙向繫結原理

2021-10-24 00:24:46 字數 790 閱讀 4587

vue資料雙向繫結是通過資料劫持結合發布者-訂閱者模式來實現的。首先要對資料進行劫持監聽,所以需要設定乙個***observer,用來監聽所有的屬性。如果屬性發生了變化,就要告訴訂閱者watcher看是否需要更新,因為訂閱者很多,所以我們需要有乙個訊息訂閱器容器dep專門收集訂閱者,然後在***observe和訂閱者watcher之間進行統一管理。接著需要乙個指令解析器compile,對每乙個節點元素進行掃瞄分析,將相關指令對應初始化成乙個訂閱者watcher,並替換掉模板資料或者繫結相應的函式。當訂閱者watcher接收到相應屬性發生變化就會執行對應的更新函式,從而更新檢視。

1.實現乙個***observer,用來劫持並監聽所有屬性,如果有變動的,通知訂閱者。

2.實現乙個訂閱者watcher,可以接收到屬性的變化,通知並執行相應的函式,進行更新檢視。

3.實現乙個解析器compile,可以掃瞄和解析每個節點的相關指令,並根據初始模板去初始化相對應的訂閱器

4.核心是object.defineproperty,通過definepropertyset方法來提醒訂閱者watcher屬性發生了變化,需要去更新檢視,通過definepropertyget方法去替換相應模板資料。

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雙向繫結原理

view更新data 通過事件監聽,比如input標籤監聽 input 事件 data更新view 通過object.defineproperty 對屬性設定乙個set函式,當資料改變了就會來觸發這個函式,將一些需要更新的方法放在這裡面就可以實現 實現過程 1.實現乙個 observer,用來劫持並...