Vue-vue的数据双向绑定的原理

vue的数据双向绑定的原理

原理：数据劫持和发布订阅模式。
（Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他不变。）

1、数据劫持

Vue通过数据劫持来实现双向绑定。当组件初始化时，Vue会遍历data中的每个属性，使用Object.defineProperty将这些属性转换为getter和setter。

2、发布-订阅模式

在Vue中，还使用了发布-订阅模式，即观察者模式。每个被劫持的属性都维护了一个依赖列表，用来存储所有依赖于该属性的观察者（Watcher）。

3、整合成Vue的双向绑定

在Vue中，每个组件实例都有一个Watcher实例，负责监听数据的变化，并在数据变化时更新视图。当访问模板中的数据时，会触发getter，将Watcher添加到依赖列表中。当数据发生变化时，会触发setter，通知所有订阅者进行更新。