Vue雙向繫結原理

2021-10-03 20:52:02 字數 845 閱讀 6257

vue實現資料雙向繫結的原理就是用object.defineproperty()重新定義(set方法)物件設定屬性值和(get方法)獲取屬性值的操縱來實現的

object.property()方法的解釋:object.property(引數1,引數2,引數3) 返回值為該物件obj

其中引數1為該物件(obj),引數2為要定義或修改的物件的屬性名,引數3為屬性描述符,屬性描述符是乙個物件,主要有兩種形式:資料描述符和訪問描述符。這兩種物件只能選擇一種使用,不能混合使用。而get和set屬於訪問描述符物件的屬性。

這個方法會直接在乙個物件上定義乙個新屬性或者修改物件上的現有屬性,並返回該物件

var keyvalue=1;

var obj={};

object.defineproperty(obj,「key」,")

get : function () { 

return keyvalue

物件obj獲取key屬性時,會觸發 get方法,得到是變數keyvalue的值。當重新設定key值時,會觸發set方法,將變數keyvalue的值設定成已經變換的值。如此 就實現了乙個簡單的資料雙向繫結,當改變變數keyvalue的值的時候,obj.key也會發生改變,設定obj.key時,變數keyvalue也會改變。

vue的資料雙向繫結是通過資料劫持和發布-訂閱者功能來實現的

實現步驟:1.實現乙個監聽者oberver來劫持並監聽所有的屬性,一旦有屬性發生變化就通知訂閱者

2.實現乙個訂閱者watcher來接受屬性變化的通知並執行相應的方法,從而更新檢視

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

vue雙向繫結原理

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

vue雙向繫結原理

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

vue雙向繫結原理

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