vue双向数据绑定原理？

定义

vue是采用数据劫持结合发布者-订阅者模式来实现的，通过object.definedProperty来劫持各个属性的getter和setter，当数据发生变化的时候，发布消息给订阅者，然后触发相应的监听回调。

思路分析

数据更新，视图更新；视图更新，数据更新

通过Object.definedProtype来监听属性的变化，然后通过set方法来更新视图

实现过程

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

流程图如下：

参考：https://zhuanlan.zhihu.com/p/78276361