vue--双向数据绑定原理

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

数据劫持

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

发布者-订阅者模式

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

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

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

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

相关推荐
妮妮喔妮10 分钟前
4.27搭建用户界面
前端·javascript·vue.js
航小码21 分钟前
React 19 用到的新特性
前端·react.js·前端框架
Qredsun34 分钟前
JS-OCR-demo加载本地文件
开发语言·javascript·ocr
黄同学real44 分钟前
Vue2 相关知识点整理
前端·vue.js
哎哟喂_!1 小时前
在 UniApp 中实现 App 与 H5 页面的跳转及通信
前端·javascript·vue.js·uni-app
^小桃冰茶1 小时前
HTML 的基本结构与简单文件编写方法
前端·html
生产队队长1 小时前
HTML:常用标签(元素)汇总
前端
森叶2 小时前
大前端开发——前端知识渐变分层讲解 & 利用金字塔原理简化前端知识体系
前端·webpack·electron
曹天骄2 小时前
免费 Mock 图片 Mock 地址清单
javascript
源码集结号3 小时前
java智慧城管综合管理系统源码,前端框架:vue+element;后端框架:springboot;移动端:uniapp开发,技术前沿,可扩展性强
java·vue.js·spring boot·源代码·大数据分析·城管·电子办案