Vue双向数据绑定

Vue中的双向数据绑定原理

• 利用ES5中的 object.defineProperty() 方法来实现，它是ES5中无法shim（兼容）的特性，所以Vue不支持IE8以及更低版本浏览器。
• object.defineProperty() 方法 可以用来给 对象添加属性 ，与一般的 对象添加属性 不同的是，它可以对添加的属性加些修饰，而双向数据绑定的原理利用了：getter / setter

//一般的 给对象添加属性：
var obj = {};
obj.name = 'jack';
console.log(obj);

• get 的使用：

//object.defineProperty() 方法 给对象添加属性：
var obj = {};
object.defineProperty(obj,'msg',{
      get: function () {
         //当访问对象属性的时候，这个方法会执行！！！
            console.log('对象的msg属性被访问了~');
      },
      set: function () {
        //当设置对象属性法时候，这个方法会执行！！！
      }
}) 
console.log(obj.msg);

get的结果

一般 get 是返回某个具体的值；

• set 的使用：

//object.defineProperty() 方法 给对象添加属性：
var obj = {};
object.defineProperty(obj,'msg',{
      get: function () {
         //当访问对象属性的时候，这个方法会执行！！！
            console.log('对象的msg属性被访问了~');
            return this._msg;
      },
      set: function (val) {
        //当设置对象属性法时候，这个方法会执行！！！
          console.log('给对象设置了msg属性~')
          this._msg = val;
      }
}) 
console.log(obj.msg);

set的结果

object.defineProperty() 方法 的其他描述：

• configurable：默认为false，当且仅当该属性的configurable 为 true 时，该属性描述符才能够被改变。
• enumerable：默认为 false，当且仅当该属性的enumerable 为true 时，该属性才能出现在对象的枚举属性中。
• value：默认为undefined，表示该属性的值，可以是任何有效的javascript值（数值，对象，函数等）。
• writeable：默认为false，当且仅当该属性的writeable值为true时，该属性才能够被赋值运算符改变。

Vue双向数据绑定原理的模拟实现：

结果表示：

模拟结果

Vue执行过程（双向数据绑定的原理分析）：

1、根据传入的 el 配置项，找到页面中需要被Vue管理的内容区域；
2、遍历所有的后代元素，收集出现的所有指令（v-model）和表达式（{{ }}）(mustache)；
3、遍历传入 data 中的数据，分别通过 Object.defineProperty() 实现每个数据的 get/set；
4、每个数据的 get 和 set 中，分别与页面中使用该数据的指令和表达式对应起来；
5、将来当数据改变的时候，通过 设定好的 get，将数据的变化同步到页面中；