一、定義
vue的數(shù)據(jù)雙向綁定是基于Object.defineProperty方法，通過(guò)定義data屬性的get和set函數(shù)來(lái)監(jiān)聽(tīng)數(shù)據(jù)對(duì)象的變化，一旦變化，vue利用發(fā)布訂閱模式，通知訂閱者執(zhí)行回調(diào)函數(shù)，更新dom。
二、實(shí)現(xiàn)
vue關(guān)于數(shù)據(jù)綁定的生命周期是： 利用options的data屬性初始化vue實(shí)力data---》遞歸的為data中的屬性值添加observer--》編譯html模板--》為每一個(gè){{***}}添加一個(gè)watcher；
var app = new Vue({
data:{
message: 'hello world',
age: 1,
name: {
firstname: 'mike',
lastname: 'tom'
}
}
});
1.初始化data屬性
.$data = options.data || {};這個(gè)步驟比較簡(jiǎn)單將data屬性掛在到vue實(shí)例上即可。
2.遞歸的為data中的屬性值添加observer,并且添加對(duì)應(yīng)的回調(diào)函數(shù)（initbinding）
function Observer(value, type) { this.value = value; this.id = ++uid;
Object.defineProperty(value, '$observer', {
value: this,
enumerable: false,
&nb
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式