vue--双向数据绑定原理

  • Vue采用数据劫持 + 发布者-订阅者模式实现双向数据绑定,实现逻辑图如下所示:

数据劫持

Vue 借助Object.defineProperty()来劫持各个属性,这样一来属性存取过程都会被监听到

发布者-订阅者模式

主要实现三个对象:Observer(观察者),Watcher(订阅者,观察者),Dep(发布者,订阅收集器)。

1、Observer: 数据的观察者,让数据对象的读写操作(数据劫持)都处于自己的监管之下

2、Watcher: 数据的订阅者,数据的变化会通知到Watcher,然后由Watcher进行相应的操作,例如更新视图

3、Dep: Observer与Watcher的纽带,当数据变化时,会被Observer观察到,然后由Dep通知到Watcher

相关推荐
启山智软13 小时前
【启山智软智能商城系统技术架构剖析】
java·前端·架构
我命由我1234513 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商14 小时前
2026年WordPress网站地图完整指南
java·前端·javascript
GISer_Jing14 小时前
Agent架构师详解:Skill是什么?附CSDN博客撰写可复用Skill示例
前端·ai·aigc
liucan201214 小时前
nginx服务器实现上传文件功能_使用nginx-upload-module模块
服务器·前端·nginx
英俊潇洒美少年14 小时前
MessageChannel 如何实现时间切片
javascript·react.js·ecmascript
x-cmd15 小时前
[x-cmd] 一切 Web、桌面应用和本地工具皆可 CLI -opencli
前端·ai·github·agent·cli·x-cmd
南山love15 小时前
spring-boot项目实现发送qq邮箱
java·服务器·前端
F1FJJ15 小时前
Shield CLI:MySQL 插件 vs phpMyAdmin:轻量 Web 数据库管理工具对比
前端·网络·数据库·网络协议·mysql·容器
技术钱15 小时前
react数据大屏四种适配方案
javascript·react.js·ecmascript