vue--双向数据绑定原理

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

数据劫持

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

发布者-订阅者模式

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

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

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

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

相关推荐
只喜欢赚钱的棉花没有糖20 分钟前
http的缓存问题
前端·javascript·http
小小小小宇35 分钟前
请求竞态问题统一封装
前端
loriloy36 分钟前
前端资源帖
前端
源码超级联盟38 分钟前
display的block和inline-block有什么区别
前端
GISer_Jing44 分钟前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js
让梦想疯狂1 小时前
开源、免费、美观的 Vue 后台管理系统模板
前端·javascript·vue.js
海云前端1 小时前
前端写简历有个很大的误区,就是夸张自己做过的东西。
前端
葡萄糖o_o1 小时前
ResizeObserver的错误
前端·javascript·html
AntBlack1 小时前
Python : AI 太牛了 ,撸了两个 Markdown 阅读器 ,谈谈使用感受
前端·人工智能·后端
MK-mm2 小时前
CSS盒子 flex弹性布局
前端·css·html