vue--双向数据绑定原理

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

数据劫持

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

发布者-订阅者模式

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

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

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

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

相关推荐
pink大呲花几秒前
关于番外篇-CSS3新增特性
前端·css·css3
少年维持着烦恼.5 分钟前
第八章习题
前端·css·html
我是哈哈hh8 分钟前
HTML5和CSS3的进阶_HTML5和CSS3的新增特性
开发语言·前端·css·html·css3·html5·web
田本初25 分钟前
如何修改npm包
前端·npm·node.js
明辉光焱1 小时前
[Electron]总结:如何创建Electron+Element Plus的项目
前端·javascript·electron
牧码岛1 小时前
Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别
前端·javascript·web·web前端
开心工作室_kaic1 小时前
ssm111基于MVC的舞蹈网站的设计与实现+vue(论文+源码)_kaic
前端·vue.js·mvc
云空2 小时前
《InsCode AI IDE:编程新时代的引领者》
java·javascript·c++·ide·人工智能·python·php
晨曦_子画2 小时前
用于在 .NET 中构建 Web API 的 FastEndpoints 入门
前端·.net