一、定義

vue的數(shù)據(jù)雙向綁定是基于Object.defineProperty方法,通過定義data屬性的get和set函數(shù)來監(jiān)聽數(shù)據(jù)對象的變化,一旦變化,vue利用發(fā)布訂閱模式,通知訂閱者執(zhí)行回調(diào)函數(shù),更新dom。

二、實(shí)現(xiàn)

vue關(guān)于數(shù)據(jù)綁定的生命周期是: 利用options的data屬性初始化vue實(shí)力data---》遞歸的為data中的屬性值添加observer--》編譯html模板--》為每一個{{***}}添加一個watcher;

var app = new Vue({

  data:{

    message: 'hello world',

    age: 1,

    name: {

      firstname: 'mike',

      lastname: 'tom'

    }

  }

});  

1.初始化data屬性

.$data = options.data || {};

這個步驟比較簡單將data屬性掛在到vue實(shí)例上即可。

2.遞歸的為data中的屬性值添加observer,并且添加對應(yīng)的回調(diào)函數(shù)(initbinding)

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

function Observer(value, type) {    this.value = value;    this.id = ++uid;
    Object.defineProperty(value, '$observer', {
        value: this,
        enumerable: false,
    &nb
        
		

網(wǎng)友評論