一、定义

vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函数,更新dom。

二、实现

vue关于数据绑定的生命周期是: 利用options的data属性初始化vue实力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实例上即可。

2.递归的为data中的属性值添加observer,并且添加对应的回调函数(initbinding)

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

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