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

vue3的双向数据绑定原理
Vue3的双向数据绑定就是通过响应式系统和虚拟DOM的结合来实现的。
响应式系统：
Vue3的响应式系统是基于ES6的Proxy对象实现的。
在初始化Vue实例时，Vue会对数据对象进行递归地遍历，将每个属性都转换为getter和setter。
当属性被读取时，会触发getter函数，Vue会将当前的Watcher对象添加到依赖列表中。
当属性被修改时，会触发setter函数，Vue会通知依赖列表中的每个Watcher对象进行更新操作，从而保证数据和视图的同步。
虚拟DOM：
Vue3使用虚拟DOM来高效地更新视图。在初始化时，Vue会将模板编译为虚拟DOM树，并将其与真实DOM进行比较，找出差异并更新。
当数据改变时，Vue会重新生成虚拟DOM树，并与之前的虚拟DOM树进行比较，找出差异并更新。
通过虚拟DOM的比较和更新，可以实现对DOM的局部更新，从而提高渲染性能。

响应式系统保证了数据和视图的同步，而虚拟DOM则通过高效的更新方式提高了渲染性能。