vue的雙向繫結原理解析（vue專案重構二）

現在的前端框架 如果沒有個資料的雙向/單向繫結，都不好意思說是乙個新的框架，至於為什麼需要這個功能，從jq或者原生js開始做專案的前端工作者，應該是深有體會。

以下也是個人對vue的雙向繫結原理的一些淺薄認識，當然 再vue框架的真正實現上，比我分析的要複雜的多。主要是來了解思想

首先看下下面這段主要**：

let data = ;

let target = null
;        
//乙個抽象出來的dep類
class dep 
depend()     
}//迴圈更新被儲存的函式/屬性
notify() 
}//迴圈data的所有屬性
object.keys(data).foreach(key =>
set(newvalue) 
})})
//乙個只有當企圖使用資料雙向繫結時才會觸發的函式。
function
watcher(myfunc) 
watcher(() =>) 

1：dep  乙個用來進行資料雙向繫結的類，

a: constructor： 繫結屬性，每次進來需要相應雙向繫結時 都將目標屬性進行重置，用來進行之後的操作。

b: depend： 這個解釋為依賴，可以理解為將目標函式（屬性 比如data.name），推進乙個全域性的儲存陣列中。

c: notify：這個可以解釋為更新頁面被繫結的資料 執行這個函式，可以將重新設定/輸入的屬性 發生檢視上的變化。

2：obeject.defiepropoerty()  這個js api介面是實現當資料發生改變時 攔截資料（屬性）的。

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

// 語法:

object.defineproperty(obj, prop, descriptor)

prop要定義或修改的屬性的名稱。

descriptor將被定義或修改的屬性。 

返回值是：被傳遞給函式的物件。

簡單的描述：

該方法允許精確新增或修改物件的屬性。通過賦值操作新增的普通屬性是可列舉的，能夠在屬性列舉期間呈現出來（for...in或object.keys方法）， 這些屬性的值可以被改變，也可以被刪除。這個方法允許修改預設的額外選項（或配置）。預設情況下，使用object.defineproperty()新增的屬性值是不可修改的。

如果您能看懂上面的**執行模式 那麼就可以看懂下面的這幅圖了，基本思想就是這樣。

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