8.vue的双向绑定的原理是什么

核心回答：

vue是采用数据劫持 结合 发布-订阅模式来实现响应式的。
vue2.x是通过ES5提供的Object.defineProperty()方法来劫持(监视) 对象中各个属性的getter和setter，当获取值时触发getter方法，设置值时触发setter方法，当数据变动时，发布消息给订阅者，触发相应的监听回调。

具体步骤：

1. 将需要被响应式的对象进行递归遍历，包括子属性对象的属性，都添加上getter和setter方法，给这个对象的任意一个属性赋值，就会触发setter，就能监听到数据变化了。这个过程叫observer

2. compile解析模板指令，将模板中的变量替换成被监听的数据，初始化渲染页面时，将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，更新函数就会触发，然后更新视图

3. Watcher订阅者是Observer和compile之间通信桥梁

   • 在自身实例化时在属性的dep中添加自己
   • 自身有一个update方法
   • 属性变化时触发dep.notice()方法时，调用自身的update方法，并触发compile中绑定的回调

4. 而vue将observer、compile和watcher三者整合，通过observer来监听自己的model数据变化，通过compile来编译模板指令，最终利用watcher搭起的observer和compile之间的通信桥梁
   达到数据变化—试图更新;
   视图交互变化(input)–>数据model变更的双向绑定效果

版本比较:

vue3.0之前是采用的Object.definePropetry，
3.0版本非基本数据类型的采用的是 reactive 其背后是用的是 Proxy，基本数据类型可以采用Proxy，也可以使用ref， 其背后也是使用的Object.definePropetry

1. 基于数据劫持/依赖收集 的双向绑定的优点

   • 不需要显示的调用，Vue利用数据劫持+发布订阅，可以直接通知变化并且驱动视图
   • 直接得到精确的变化数据，劫持了属性setter，当属性值改变，我们可以精确的获取变化的内容newValue，不需要额外的diff操作

2. Object.defineProperty的缺点

   • 不能监听数组：因为数组没有getter和setter，而且数组长度不确定，如果太长性能负担太大

   • 只能监听属性，而不是整个对象，需要遍历循环属性

   • 只能监听属性变化，不能监听属性的删减

3. proxy的好处

   • 可以监听数组
   • 监听整个对象不是属性
   • 13种拦截方法，强大很多
   • 返回新对象而不是直接修改原对象，更符合immutable；

4. proxy的缺点

   • 兼容性不好，无法被polyfill磨平