vue数据双向绑定原理

数据绑定原理

    vue通过使用双向数据绑定，来实现view层和model层的同步更新。vue的数据双向绑定主要是通过数据劫持和订阅者模式来实现。

    首先通过Object.defineProperty()方法对model层数据的各个属性添加访问器属性，以此来实现对数据的劫持，因此当model层中的数据发生变化的时候，可以通过配置setter和getter方法来实现对view层数据更新的通知。

两种绑定情况

    数据在html模板中一共有两种绑定情况

• 使用v-model来对value值进行绑定
• 作为文本绑定

    在对模板引擎进行解析的过程中，如果遇到元素节点，并且属性值包含v-model的话，我们就从model层中获取v-model所对应的属性的值，并赋值给元素的value值，然后给这个元素设置一个监听事件，当view层中元素的数据发生变化的时候触发该事件，通知model层中的对应属性值进行更新。

    如果遇到了绑定的文本节点，使用model层中对应的属性的值来替换这个文本。对于文本节点的更新，我们使用订阅者模式，属性作为一个主题，我们为这个节点设置一个订阅者对象，将这个订阅者对象加入这个属性主题的订阅者列表中。当model层数据发生改变的时候，model层作为发布者向主题发出通知，主题收到通知再向它的所有订阅者统一送，听约着收到通知后更改自己的数据。

Object.defineProperty()

Object.defineProperty()函数一共有三个参数：

• 需要定义属性的对象
• 需要定义的属性
• 该属性的描述符
  （value：属性的值、writable：属性是否可写、enumerable：属性是否可枚举、configurable：属性是否可配置修改）

缺点：有一些对属性的操作，使用这种方法无法拦截，比如通过下标修改数组数据或者给对象新增属性，不过vue内部通过重写函数解决了这个问题。

    在vue3.0中已经不使用这种方式了，而是通过使用Proxy（ES6）对对象进行代理，从而实现数据劫持。使用Proxy好处是他可以完美的监听到任何方式的数据改变，唯一缺点是兼容性问题。