vue雙向繫結原理

2021-10-24 14:40:20 字數 570 閱讀 7726

view更新data:通過事件監聽,比如input標籤監聽『input』事件

data更新view:通過object.defineproperty( )對屬性設定乙個set函式,當資料改變了就會來觸發這個函式,將一些需要更新的方法放在這裡面就可以實現

實現過程:

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

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

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

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...