vue双向绑定原理及实现

vue双向绑定原理及实现

数据双向绑定原理简单概括的话就是:
View层影响Model层是通过对 ‘keyup’ 等事件的监听。
Model层影响View层是通过 Object.defineProperty( ) 方法劫持数据并结合发布订阅者模式的方式来实现数据的双向绑定。

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

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( ) 。