vue双向绑定原理（一）

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。

var vm = new Vue({

    data: {

        obj: {

            a: 1

        }

    },

    created: function () {

        console.log(this.obj);

    }

});

结果如下：

调试结果

现在我们可以看到属性a有两个对应的get和set方法，但是为啥会多了出这两个方法呢？因为vue是通过Object.defineProperty（）来实现数据劫持的。

Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set。

var Book = {

  name: '意林'

};

console.log(Book.name);  // 意林

如果这时候要给书名加上个《》的话，就要用到Object.defineProperty( )：

var Book = {}

var name = '';

Object.defineProperty(Book, 'name', {

  set: function (value) {

    name = value;

    console.log('你取了一个书名叫做' + value);

  },

  get: function () {

    return '《' + name + '》'

  }

})

Book.name = '意林';  // 你取了一个书名叫做意林

console.log(Book.name);  // 《意林》

通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数。如果console.log(Book);结果和vue数据有点类似的：

执行结果

这就说明vue确实是通过这种方法来进行数据劫持的。