vue 双向数据绑定原理

屋里请，沙发坐，满屋的瓜子随便嗑。今天我们接着唠一唠，前端比较重要的面试题，双向数据绑定原理。

vue中v-model是如何实现的

Vue双向数据绑定实现原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。
分为两个进程，一个进程是对挂载目标元素模板里的v-model和{{ }}这两个指令进行编译（绿色）。另一个进程是对传进去的data对象里面的数据进行监听（红色）。

红色：

• 当你把一个普通的JavaScript对象传给Vue实例的 data 选择，Vue将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部加上set和get访问器，这样在设置data的属性这的时候，会触发set方法，那么set方法主要有两个作用，一是改变data里边的属性值，二是发出数据变化的通知。Observer作为数据的观察者，让数据对象的读写操作都处于自己的监管之下，Dep作为Watcher（订阅器）的收集者，当数据发生变化set会发出通知，会被Observer观察到，然后由Dep通知到Watcher，最后更新视图。

绿色：

• 指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，同样由Dep进行收集，然后由Dep通知到Watcher，最后更新视图。

节点介绍

• 数据监听器观察者Observer，能够对数据对象的所有属性进行监听，让数据对象的读写操作都处于自己的监管之下，当数据发生变化set会发出通知，会被Observer观察到，然后由Dep通知到Watcher，最后更新视图。
  实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器。Oberser，用来监听所有属性。
• Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，执行指令绑定的响应回调函数，1.如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
• 指令解析器Compile，
  对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher
• Dep：因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。