技術標籤：雙向資料繫結vue

vue雙向資料繫結原理

話述

vue.js是採用資料劫持結合釋出者-訂閱者模式的方式，通過object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥來渲染試圖

實現步驟

observer主要是負責對Vue資料進行資料劫持，使用資料擁有getter和setter方法
指令解析器負責繫結資料和指令，繫結試圖更新方法
watcher負責資料監聽，當資料發生改變通知訂閱者，呼叫試圖更新函式更新試圖

object.defineProperty()的理解

·作用

object.defineProperty()方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件。

·引數

object.defineProperty(obj,prop,descriptor)
obj要定義屬性的物件。
prop要定義或修改的屬性的名稱。
descriptor要定義或修改的屬性描述符。

程式碼展示

var obj = { b：“123” }
console.log(obj)
Objiect.defineProperty(obj,“a”,{
value：37, //值
writable：true, 是否可以被修改
enumerable：true, 是否可以被列舉也就是是否可以遍歷
configurable：true 是否可以被刪除
})；
// 控制檯輸出
for ( let i in Object.keys(obj)) {

console.log(i)
}
obj.a = “36”
console.log(obj)