Vue双向绑定的核心机制简单来说数据变化时间谍通知听众触发视图更新
Vue双向绑定的核心机制
一、数据劫持
数据劫持是Vue实现双向绑定的一个关键手段。简单来说，Vue会在你定义的数据属性上安装“间谍”，一有变化就能第一时间知道。Vue会像侦探一样，悄悄地跟踪你数据对象的每一个属性。一旦某个属性被修改，Vue就会触发一系列动作，就像侦探发现线索一样，通知视图更新。
| 优点 | 局限 |
|---|---|
| 精准追踪数据变化，确保视图和数据同步。 | 不能直接追踪数组索引变化和新属性。 |
二、发布-订阅模式
发布-订阅模式就像是数据变化的消息群发系统。当你数据变化了，它会自动向所有关心它的组件发出通知。当Vue实例创建时，它会为每个数据属性创建一个“听众”。当数据变化时，“听众”会收到消息，然后更新视图。
| 优点 | 局限 |
|---|---|
| 数据和视图解耦，易于维护和扩展。 | 数据量增大时，可能引起性能问题。 |
三、数据劫持与发布-订阅模式的结合
Vue将数据劫持和发布-订阅模式结合，就像给数据变化装上了双保险。- 数据初始化时，Vue会递归遍历数据对象，安装“间谍”并创建“听众”。
- 数据变化时，“间谍”通知“听众”，触发视图更新。
四、Vue 3.0中的Proxy
Vue 3.0引入了新的方法，用更强大的“间谍”来替代旧的方法，解决了一些旧方法的局限性，还提高了性能。这个新方法可以直接监听对象新增的属性和数组索引的变化，就像更高级的侦探一样，能够更全面地追踪数据变化。