vue--双向数据绑定原理

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

数据劫持

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

发布者-订阅者模式

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

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

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

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

相关推荐
前端小巷子7 分钟前
Vue3 响应式革命
前端·vue.js·面试
一狐九22 分钟前
Flutter如何通过GlobalKey调用组件内的方法
前端·flutter
wyzqhhhh32 分钟前
前端如何处理首屏优化问题
前端
杨荧38 分钟前
基于Python的反诈知识科普平台 Python+Django+Vue.js
大数据·前端·vue.js·python·数据分析
22jimmy2 小时前
JavaWeb(二)CSS
java·开发语言·前端·css·入门·基础
m0_738120725 小时前
CTFshow系列——命令执行web38-40
前端·windows·安全·web安全
zhoxier6 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
是小狐狸呀6 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿9 小时前
常用css
前端·css
你的人类朋友10 小时前
说说git的变基
前端·git·后端