Vue的双向绑定数据的原理

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

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

具体步骤如下:

  1. Vue通过 Object.defineProperty() ⽅法对数据对象进⾏劫持。

  2. 在劫持过程中,为每个属性添加了 getter 和 setter 。

  3. 当访问属性时,会触发 getter 函数,⽽当属性值发⽣变化时,会触发 setter 函数。

  4. 在 setter 函数中,Vue会通知相关的订阅者,即依赖于该属性的视图或其他数据。

  5. 订阅者收到通知后,会执⾏相应的更新操作,将新的数据反映到视图上。

这样,当数据发⽣变化时,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实现了双向绑定的效果,使得数据的变化能够⾃动反映到视图上。

相关推荐
Boilermaker199234 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构