Vue的数据双向绑定

双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

数据劫持：是在访问或者修改对象的某个属性时，拦截这个行为，进行额外的操作或者修改返回结果。

1、监听器Observer：通过 Object.defineProperty 的getter和setter进行读取和赋值的属性来劫持并监听所有属性，如果有变动的，就通知订阅者。
2、订阅者Watcher：可以收到属性的变化通知并执行 render 函数，从而更新视图。
3、解析器Compile：可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

Object.defineProperty

原理

Object.defineProperty 对传入的数据进行相应的数据拦截，为其动态添加 get 与 set 方法。当数据变化的时候，就会触发对应的 set 方法，当 set 方法执行完成时，内部会进一步触发订阅者 watcher，当数据改变，进行虚拟 Dom 对比（diff 算法），执行 render 函数，进行视图更新。

缺点

1、不能监听数组的变化
2、只能监听已存在的属性，对于新增或删除的属性不能监听

Proxy（Vue3）

原理

用于修改某些操作的默认行为，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

优势

1、Proxy 可以直接监听对象而非属性。
2、Proxy 可以劫持整个对象，并返回一个新对象。
3、Proxy 可以直接监听数组的变化。
4、Proxy 有多达13种拦截方法，功能比 Object.defineProperty 强大很多。

参考文章：https://www.jianshu.com/p/d16565c6b6ee