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

相关推荐
jiangzhihao05153 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI5 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front6 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie6 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀6 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻6 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树7 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔7 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城7 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04127 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端