双向绑定原理

Vue 采用数据劫持&发布订阅模式的方式 通过Object.defineProperty()方式来劫持（监控）各属性的 getter、setter，并在数据发生变动时通知订阅者，触发响应的监听回调

1. 当一个Vue实例创建时，Vue 会遍历data的属性
2. 通过Object.defineProperty()把它们转换为 getter/setter，并在内部追踪相关依赖
3. 属性被访问和修改时通知变化
4. 每个组件实例都有相应的 watcher，它会在组件渲染过程中，把属性记录为依赖
5. 之后当依赖项的setter呗调用时，会通知watcher重新计算，保证关联组件更新

双向绑定大致可以分为三块：observer、compiler、watcher

• observer 数据监听器：对数据对象的所有属性进行监听，监听到变化后通知订阅者
• compiler 指令解析器：扫描模板，并对指令进行解析，绑定指定事件
• watcher 订阅者：关联 observer 和 compiler，订阅并接收属性变化的通知，执行指令绑定的操作，去更新视图（update()方法用于执行 compiler 中绑定的回调）

双向绑定的特点

1. 🐵 Vue 采用数据劫持&发布订阅模式的方式的优点：

   1. 不需要显示的调用，可以直接通知变化和驱动视图
   2. 得到进准的数据变化，不需要额外的 diff 操作

2. 📚 Object.defineProperty()缺点：

   1. 不能监听数组
   2. 不能监听整个对象，只能监听属性，需要遍历属性
   3. 只能监听属性变化，不能监听属性的删减

3. 🐶 proxy的好处：

   1. 可以监听数组
   2. 监听的是整个对象
   3. 13种拦截方法
   4. 返回的是新对象而不是直接修改原对象，更符合immutable