vue雙向資料繫結原理

vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，`

}div>
// 原生物件即資料
var data = 
// 建立乙個 viewmodel 例項
var vm = new vue()然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set方法，進行資料的設定和獲取。
object.defineproperty(vue.prototype, '$data', ,

set (newdata) 
}   })

vue.prototype._setdata = function

(newdata) 
var olddata = this._data
this._data = newdata
var keys, key, i
// unproxy keys not present in new data
keys = object.keys(olddata)
i = keys.length
while (i--) 
}// proxy keys not already proxied,
// and trigger change for changed values
keys = object.keys(newdata)
i = keys.length
while (i--) 
}olddata.__ob__.removevm(this)
observe(newdata, this)
this._digest()
}

export function observe (value, vm) 

var ob
if (
hasown(value, '__ob__') &&
value.__ob__ instanceof observer
)  else
if (
shouldconvert &&
(isarray(value) || isplainobject(value)) &&
object.i***tensible(value) &&
!value._isvue
) if (ob && vm) 
return ob

根據新的資料建立乙個新的觀察物件，這裡提一下，vue用的是訂閱模式，首先會把每個資料訂閱一下，當資料變化時，會通知watcher重新計算值 

最後一行**this._digest()就是通知更新物件的值，把物件設定成newdata，我理解的大概過程是這樣的，大家看到有錯誤理解的歡迎給我指出來。這裡提醒一下之前犯過的錯誤，例如：

}p>
template>
data()
}ready();
this.user.***=』女』;
}

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...

vue資料雙向繫結原理

vue的資料雙向繫結的小例子 html index.js function selfvue data,el,exp 對data的每一層級的屬性進行監聽，如果變化執行notify observe data 初始化模板資料的值 el.innerhtml this data exp new watcher...

vue 雙向資料繫結原理

1 2 input type text id input 34 p id desc p 1 let obj 2 let temp 採用臨時變數 obj 3 object.defineproperty obj,name 8 給obj的name屬性賦值會觸發 9set val 15 1617 設定了id...