Vue的双向绑定数据的原理

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue的双向绑定数据的原理是基于数据劫持和发布者-订阅者模式的组合。

具体步骤如下：

Vue通过 Object.defineProperty() ⽅法对数据对象进⾏劫持。
在劫持过程中，为每个属性添加了 getter 和 setter 。
当访问属性时，会触发 getter 函数，⽽当属性值发⽣变化时，会触发 setter 函数。
在 setter 函数中，Vue会通知相关的订阅者，即依赖于该属性的视图或其他数据。
订阅者收到通知后，会执⾏相应的更新操作，将新的数据反映到视图上。

这样，当数据发⽣变化时，Vue能够⾃动更新相关的视图，实现了双向绑定的效果。

这种原理结合了数据劫持和发布者-订阅者模式的特点，实现了数据与视图之间的⾃动同步。通过数据劫持，Vue能够捕获数据的变化，⽽发布者-订阅者模式则确保了数据变化时的及时通知和更新。

javascript 复制代码

// 定义⼀个数据对象
const data = {
 message: 'Hello Vue!',
};
// 通过Object.defineProperty()劫持数据对象
Object.defineProperty(data, 'message', {
 get() {
 console.log('访问数据');
 return this._message;
 },
 set(newValue) {
 console.log('更新数据');
 this._message = newValue;
 // 通知订阅者，执⾏更新操作
 notifySubscribers();
 },
});
// 定义⼀个订阅者列表
const subscribers = [];
// 订阅者订阅数据
function subscribe(callback) {
229
 subscribers.push(callback);
}
// 通知订阅者，执⾏更新操作
function notifySubscribers() {
 subscribers.forEach((callback) => {
 callback();
 });
}
// 订阅者更新视图
function updateView() {
 console.log('视图更新：', data.message);
}
// 订阅数据变化
subscribe(updateView);
// 修改数据，触发更新
data.message = 'Hello VueJS!';

在上述示例中，我们通过 Object.defineProperty() 对 data 对象的 message 属性进⾏劫持，并在 getter 和 setter 中添加了相应的⽇志和更新操作。订阅者通过 subscribe ⽅法订阅数据变化，并在 updateView ⽅法中更新视图。当我们修改 data.message的值时，会触发 setter 函数，从⽽通知订阅者执⾏更新操作，最终更新了视图。

通过这种⽅式，Vue实现了双向绑定的效果，使得数据的变化能够⾃动反映到视图上。