vue 双向绑定原理实现

实现 mvvm 主要包含两个方面，数据变化更新视图，视图变化更新数据

image.png

Vue 数据双向绑定（即数据响应式），是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值 get 和设置属性值 set 的操作来实现的。

image.png

数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器 Observer，用来监听所有属性。如果属性发生变化了，就需要告诉订阅者 Watcher 看是否需要更新。因为订阅者是有很多个，所以需要有一个消息订阅器 Dep 来专门收集这些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。还需要有一个指令解析器 Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者 Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
数据双向绑定流程图：

image.png

image.png

根据原理图来介绍整个流程：

1、首先使用Object.defineProperty()中的 getter/setter 作为一个Observer（劫持器）去劫持data对象中的所有属性，在属性 set 的时候通知Dep（订阅者收集器）去通知相关订阅者。

2、实现一个 Watcher（订阅者），Watcher 就是收到 Dep 数据变化的通知后，会去执行相对应的更新函数来更新视图，同一个数据可能在多处被使用，所以订阅者不止一个；这也是 Dep 存在的意义，对 Watcher 集中起来统一管理。

3、Dep（订阅者收集器），里面存放每个数据对应的所有 Watcher，当Observer 的 set 方法被触发时，就调用 Dep 里面的的notify（通知）方法，逐条去通知所有的 Watcher 。

4、Complier是一个编译器，作用是解析模板指令，扫描和解析 vue 代码中每一个节点，先将节点转换为碎片化文档 DocumentFragment（性能优化，减少重排），再一次性 append 所有节点至目标 element 内，完成视图的初始化；同时编译器还担当着初始化 Watcher 的任务，即给 Watcher 绑定相关的更新函数 ，最终使 Watcher 添加到 Dep 中去。

面试解释
如果可以的话把整个流程图画出来给面试官看，然后顺着流程讲给他听就行。但是一定要讲到 Object.defineProperty( ) 。