Vue是如何实现双向绑定的

vue的双向绑定指的是数据变化更新视图，视图变化更新数据。
视图变化更新数据一般就采用事件监听的方式就可以了，数据变化更新视图就需要涉及响应式原理。

vue2.x的响应式原理的基础是Object.defineProperty属性。利用Object.defineProperty劫持对象的访问器，在属性值发生变化时我们可以获取变化，然后根据变化进行后续响应，在vue3.0中通过Proxy代理对象进行类似的操作。

Vue三要素

双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一。

• 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定
• 模板引擎: 如何解析模板
• 渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染

可以实现双向绑定的方法有很多，KnockoutJS基于观察者模式的双向绑定，Ember基于数据模型的双向绑定，Angular基于脏检查的双向绑定，最后就是基于数据劫持的双向绑定。

常见的基于数据劫持的双向绑定有两种实现，一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy。

基于数据劫持实现的双向绑定的特点

1.什么是数据劫持

含义：利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,从而进行进一步操作。

// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我演过很多,可游戏我只玩贪玩懒月');
  } else {
    console.log('来做我的兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`大家好,我系${newVal}`);
      say(newVal);
    },
  });
});

data.name = '渣渣辉';
//大家好,我系渣渣辉
//戏我演过很多,可游戏我只玩贪玩懒月

2.数据劫持的优势

目前业界分为两个大的流派,一个是以React为首的单向数据绑定,另一个是以Angular、Vue为主的双向数据绑定。

其实三大框架都是既可以双向绑定也可以单向绑定。
比如React可以手动绑定onChange和value实现双向绑定，也可以调用一些双向绑定库；Vue也加入了props这种单向流的api实现单向绑定。

• 无需显示调用

例如Vue运用数据劫持+发布订阅，直接可以通知变化并驱动视图。
上面的例子也是比较简单的实现data.name = '渣渣辉'后直接触发变更；而比如Angular的脏检测则需要显示调用markForCheck(可以用zone.js避免显示调用,不展开)，react需要显示调用setState。

• 可精确得知变化数据

还是上面的小例子，我们劫持了属性的setter，当属性值改变，我们可以精确获知变化的内容newVal。因此在这部分不需要额外的diff操作，否则我们只知道数据发生了变化而不知道具体哪些数据变化了，这个时候需要大量diff来找出变化值,这是额外性能损耗。

3 基于数据劫持双向绑定的实现思想

基于数据劫持的双向绑定离不开Proxy与Object.defineProperty等方法对对象/对象属性的"劫持",我们要实现一个完整的双向绑定需要以下几个要点。

1. 利用Proxy或Object.defineProperty生成的Observer针对对象/对象的属性进行"劫持",在属性发生变化后通知订阅者
2. 解析器Compile解析模板中的Directive(指令)，收集指令所依赖的方法和数据,等待数据变化然后进行渲染
3. Watcher属于Observer和Compile桥梁,它将接收到的Observer产生的数据变化,并根据Compile提供的指令进行视图渲染,使得数据变化促使视图变化
   

Proxy与Object.defineProperty的优劣对比

• Proxy可以直接监听对象而非属性
• Proxy可以直接监听数组的变化
• Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
• Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改
• Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利
• Object.defineProperty兼容IE

Vue的响应式系统

响应式系统简述:

• 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
• Vue 的 data 上的属性会被添加 getter 和 setter 属性。
• 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
• data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。