vue 双向数据绑定原理

Vue 双向数据绑定原理：

　　Vue的双向数据绑定原理主要基于数据劫持和发布-订阅模式，通过Object.defineProperty为各个属性定义get，set特性方法，在数据发生变化时给订阅者发布消息，触发相应的监听回调。

 

• 数据劫持：Vue.js 使用 Object.defineProperty() 方法来劫持各个属性的 setter 和 getter，在数据变动时发布消息给订阅者，触发相应的监听回调。通过这种方式，Vue.js 能够追踪每个属性的变化，从而实现对数据的双向绑定。
  
• 发布-订阅模式：Vue.js 的双向数据绑定还使用了发布-订阅模式。当数据发生变化时，所有依赖这个数据的“订阅者”都会自动更新。这意味着，如果你把数据绑定到一个视图上，当这个数据改变时，视图也会自动更新。同样地，如果视图中的数据发生了改变（例如，用户在表单中输入了新的值），这个改变也会反映到数据模型中。

 

双向数据绑定过程：

• 当 Vue 实例被创建时，Vue 会遍历所有的 data 属性，并使用 Object.defineProperty() 把它们转换为 getter 和 setter。这样，当数据发生变化时，Vue 就能知道并更新视图。
• 当你在模板中使用数据（例如，{{ message }}）时，Vue 会创建一个“依赖”（dependency）。这个依赖会添加到对应数据的“订阅者”列表中。
• 当数据发生变化时（例如，你修改了 message 的值），对应的 setter 会被触发。setter 会通知所有订阅这个数据的依赖进行更新。这样，视图就会自动更新为最新的数据。

 

总结：Vue.js 的双向数据绑定是通过劫持数据的 getter 和 setter，结合发布-订阅模式，实现了当数据变化时自动更新视图，以及当视图变化时自动更新数据的效果。