Vue.js响应式数据的简单实现方法(一看就会)
目录
- 引言
- 基本概念
- 副作用函数
- 响应式数据
- 响应式数据的基本实现
- 实现思路
- 初步实现尝试
- 完善响应系统
- 泛化副作用函数名
- 修复漏洞
- 总结
引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能。而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML、JavaScript以及CSS,就能够很快上手Vue.js。学,确实好学;用,真的好用!但,你对Vue.js框架的内部实现原理掌握多少呢?今天,就让我们一起来简单复现一下Vue.js数据响应式。
基本概念
副作用函数
什么是副作用函数?意如其名,副作用函数指的就是会产生副作用的函数。什么是副作用呢?就是会对函数作用域外的其他部分产生影响。俗话说:是药三分毒,能治病,亦能致病。药,就有副作用,副作用函数也是。
副作用函数代码示例如下:
文章图片
当effect函数执行时,它会设置body的文本内容,从而直接或间接影响到其他任何对body文本内容有所依赖的函数的执行。这就是一个简单的副作用函数。
响应式数据
以我的理解,相较“响应式数据”而言更直白的叫法应该是“副作用数据”,就好像副作用函数的执行可能会影响到函数作用域外的其他内容一样,“副作用数据”的更改可能会直接或间接影响到所有依赖该数据的函数。
假响应式数据代码示例如下:
文章图片
如上图,假设每一次修改对象obj的text属性值,都会触发函数effect的重新执行,那么就可以说对象obj是一个响应式数据。当然,在这个示例里,实际上并没有实现对obj对象的数据响应。
响应式数据的基本实现
实现思路
仔细观察思考上述的例子,你可能会发现响应式数据的实现存在两个关键点:
- 副作用函数effect的执行会触发字段obj.text的读取操作
- 响应式数据obj.text值的修改会触发字段obj.text的设置操作
初步实现尝试
实现的思路有了,那现在最关键的问题就是:如何实现拦截一个对象属性的读取和设置操作。如果你对JavaScript足够熟悉,你可能就会想到Object.defineProperty函数以及Proxy对象代理。是的,这两种方案都可以实现拦截一个对象属性的读取以及设置操作。事实上,用Object.defineProperty函数实现数据响应正是Vue.js 2中所采用的方法,而Proxy对象代理则正是Vue.js 3中所采用的方法。
接下来让我们顺着上面的思路采用proxy实现一下:
文章图片
这就是采用Proxy代理对象简单实现的数据响应式,你完全可以自行创建一个副作用函数effect进行测试。当然,考虑到复杂多变的环境,此时的数据相应式还有很多继续完善的地方,让我们再加加班,尽可能地给出一个相对完美的响应式数据实现方案。
完善响应系统
泛化副作用函数名 假如有一天,副作用的函数名不叫effect了。而是叫effect1或者effect2,甚至副作用函数没有直白的名字了,变成了一个匿名函数,那么上述的响应系统方案显然是行不通的。此时,为了满足需求,我们需要提供一个用来注册副作用函数的机制,达到泛化副作用函数名的效果。
注册副作用函数名的代码示例如下:
文章图片
这样,即使是一个匿名函数,也能够被成功地注册为副作用函数,注册方法如下:
文章图片
当然,此时拦截数据的读取操作也需要做细微的调整:
文章图片
修复漏洞 在很多时候,debug都是最头疼的,特别是明明知道有bug,但就是找不到修复的方案,那种感觉真的像在坐牢……
现在我们来考虑一个极端条件:假如,在响应式数据对象obj上添加了一个原本不存在的属性,那么会发生什么?如果你对前面的内容还不熟悉,可以再返回去翻翻代码。你会发现一个惊人的事实:在响应式数据对象obj上添加一个原本不存在的属性,会在这个新添加的属性与相关的副作用函数之间建立响应联系。冷静下来思考一下,其实,导致该问题出现的根本原因是,没有在副作用函数与被操作的目标字段之间建立明确的联系。那,该如何解决呢?
你想想,在数据结构中存不存在一种结构,它具有一一对应的关系?有,当然有,映射就是。顺着这个思路,那我们可不可以用映射的来建立目标字段与副作用函数key-value对应的关系?当然可以!那么我们就可以先把负责储存函数的变量bucket声明为一个映射Map
具体实现代码如下:
文章图片
总结 总的来说,要想实现一个响应式数据其实就是利用Proxy对象代理或者Object.defineProperty对象来拦截对数据的读取和设置操作并与相应的副作用函数作精确绑定。那么,如果现在要求你用Object.defineProperty对象来实现数据响应,你能够独立实现了吗?试一下呗!
【Vue.js响应式数据的简单实现方法(一看就会)】到此这篇关于Vue.js响应式数据的简单实现方法的文章就介绍到这了,更多相关Vue.js响应式数据的实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- PO模式在selenium自动化测试框架的优势
- 微带线贴片天线尺寸的计算,利用Matlab计算+常见的RF计算在线公式
- C++|UE4智能指针TSharedPtr的几种初始化方式
- 算法题——字符串3.19
- PO模式在selenium自动化测试框架有什么好处
- 设计模式-六大设计原则
- Java学习日记|Java学习日记14——Lambda表达式以及一些高级语法
- java基础|Java8 Lambda表达式入门
- SpringBoot|SpringBoot自定义分布式缓存starter 并用@Enablexx 控制缓存功能是否启用
- 云原生要素配置分离ConfigMap创建方式