深入源码设计!Vue3.js核心API——Computed实现原理

如果您觉得这篇文章有帮助的话!给个点赞和评论支持下吧,感谢~

作者:前端小王hs

阿里云社区博客专家/清华大学出版社签约作者/csdn百万访问前端博主/B站千粉前端up主

此篇文章是博主于2022年学习《Vue.js设计与实现》时的笔记整理而来

书籍:《Vue.js设计与实现》 作者:霍春阳

本篇博文将在书第4.8节的基础上进一步解析,附加了测试的代码运行示例,以及对书籍中提到的ES6中的数据结构及其特点进行阐述,方便正在学习Vue3想分析Vue3源码的朋友快速阅读

如有帮助,不胜荣幸

前置章节:

  1. 深入理解Vue3.js响应式系统基础逻辑
  2. 深入理解Vue3.js响应式系统设计之栈结构和循环问题
  3. 深入理解Vue3.js响应式系统设计之调度执行

核心API

懒执行lazy的effect

经过前置的章节的学习,可以发现设计的effect都是立即执行的,而在4.8节的开始,作者向我们设计了一个可以按意愿时间节点执行的effect,其设计逻辑非常简单,就是在传递effectoptions形参时添加内置lazy属性,然后再在effect函数内部进行判断,如果存在lazy,则返回effectFn给调用者。那么何时何地执行effectFn的决定权就到了调用者的手上

传递lazy代码如下:

effect(// 指定了 lazy 选项,这个函数不会立即执行() => {console.log(obj.foo)},// options{lazy: true}
)

完善判断lazyeffect代码如下:

function effect(fn, options = {}) {const effectFn = () => {cleanup(effectFn)activeEffect = effectFneffectStack.push(effectFn)fn()effectStack.pop()activeEffect = effectStack[effectStack.length - 1]}effectFn.options = optionseffectFn.deps = []// 只有非 lazy 的时候,才执行if (!options.lazy) {// 执行副作用函数effectFn()}// 将副作用函数作为返回值返回return effectFn
}

那么现在,就可以使用一个变量去接收返回的effectFn,代码如下:

const effectFn = effect(() => {  console.log(obj.foo)  
}, { lazy: true })  // 手动执行副作用函数  
effectFn()

对于手动执行,我们可以使用res去接收调用函数的返回值,那么就需要在effectreturn res,代码又得继续完善:

function effect(fn, options = {}) {const effectFn = () => {cleanup(effectFn)activeEffect = effectFneffectStack.push(effectFn)// 将 fn 的执行结果存储到 res 中const res = fn() // 新增effectStack.pop()activeEffect = effectStack[effectStack.length - 1]// 将 res 作为 effectFn 的返回值return res // 新增}effectFn.options = optionseffectFn.deps = []if (!options.lazy) {effectFn()}return effectFn
}

那么重点来了,lazy和本节要实现的computed的关系在哪?(建议看完整篇再回过来看这个问题)

原因在于computed内部使用lazy去封装了getter,什么是getter?我们接着继续看

getter

从实现层面上看,gettercomputed接收的实参的昵称,代码如下:

function computed(getter) {...}

MDN的定义是:get 语法将对象属性绑定到查询该属性时将被调用的函数,有点抽象是不是?我们看文档中例子就行,代码如下:

const obj = {log: ['a', 'b', 'c'],get latest() {return this.log[this.log.length - 1];},
};console.log(obj.latest);
// Expected output: "c"

可以看到,在obj中使用了get functonName(){}的写法,那么这个作用是什么呢?答案是可以利用obj.functionName去返回动态计算值的属性,特别是不想以显示的方式返回的时候

当然,我们会可能会想,这种方式好像跟直接写函数差不太多,即下列代码所示:

const obj = {log: ['a', 'b', 'c'],latest() {return this.log[this.log.length - 1];},
};console.log(obj.latest());
// Expected output: "c"

区别在于使用get在调用时无需加(),使其看起来像调用一个属性,这样更简洁和更具有语义性,且要执行的逻辑只是计算内部的属性值,这就是使用get去计算的意义

实现computed

computedVue响应式核心API,用于声明计算属性计算属性是依赖于其他的属性依赖而存在的,如果其他的属性依赖变化了,那么就会触发computed进行重新计算,进而得到最新的计算属性,我们可以看下书中的示例,代码如下:

const sumRes = computed(() => obj.foo + obj.bar);effect(() => {// 在该副作用函数中读取 sumRes.valueconsole.log(sumRes.value);
});// 修改 obj.foo 的值
obj.foo++;

在这段示例代码中,sumRes就是声明的计算属性,其依赖于obj.fooobj.bar两个属性依赖,当obj.foo++执行后,会触发computed进而得到新的sumRes

需要注意的是,computed还具有缓存,即如果属于依赖不变的情况下,无论执行多少次,都不会触发computed的重新计算

那么computed是如何设计的呢?

其实读到这里,聪明的读者应该有个思路,就是sumRes就是getter所对应的obj,而sumRes.value就是触发了obj.getter,只不过这个getterget value(){},也就是:

const sumRes = {get value(){return ...}
}

初次实现computed

我们直接来看书中的源码是如何实现满足缓存的,代码如下:

function computed(getter) {// value 用来缓存上一次计算的值let value;// dirty 标志,用来标识是否需要重新计算值,为 true 则意味着“脏”,需要计算let dirty = true;const effectFn = effect(getter, {lazy: true});const obj = {get value() {// 只有“脏”时才计算值,并将得到的值缓存到 value 中if (dirty) {value = effectFn();// 将 dirty 设置为 false,下一次访问直接使用缓存到 value 中的值dirty = false;}return value;}};return obj;
}

可以看到是添加了一个value变量存储getter计算过后的值,并设置了一个开关dirty,第一次为true即产生计算,而计算过后就会置为false,下一次读取时就不会重新计算

但现在又出现了一个问题,如果下次读取时obj.fooobj.bar发生了变化呢?在哪里将dirty置为true

别忘了我们还可以在effect中传入schedular,也就是在调度器中置为true,代码如下:

const effectFn = effect(getter, {  lazy: true,  // 添加调度器,在调度器中将 dirty 重置为 true  scheduler() {  dirty = true;  }  
});

执行的逻辑(简化)是怎么样的?

  1. 读取sumRes.value,触发getter
  2. getter执行时触发读取obj.fooobj.bar
  3. 此时activeEffect栈顶的是封装了getteteffectFn
  4. obj.fooobj.bareffectFn关联,执行完返回sumRes.value
  5. 当触发obj.foo改变时,取出封装了getteteffectFn的执行
  6. trigger中取出schedular执行,将ditry置为true

但现在,并不会重新输出sumRes.value的值

原因在于obj.fooobj.bar关联的effect是封装了getteteffectFn,也就是:

effect(() => obj.foo + obj.bar, {  lazy: true,  // 添加调度器,在调度器中将 dirty 重置为 true  scheduler() {  dirty = true;  }  
});

只会重新执行() => obj.foo + obj.bar,而不是console.log(sumRes.value),所以下一步是要解决如何修改完obj.foo后能够重新执行console.log(sumRes.value)的问题

完善computed

其实设计的关键在于schedular,我们知道在trigger中,如果存在schedular会执行schedular而不是effectFn,所以可以在schedular中执行console.log(sumRes.value),但真正执行的其实是执行封装其的effectFn

那该如何拿到这个console.log(sumRes.value)呢?可以设计一个关联,就是obj.value与封装console.log(sumRes.value)这个effectFn的关联

我们知道,在执行完获取sumRes.value之后,此时此时activeEffect栈顶的是封装了console.log(sumRes.value)effectFn,那么就可以在执行完获取sumRes.value之后调用track,代码如下:

const obj = {  get value() {if (dirty) {value = effectFn()dirty = false}// 当读取 value 时,手动调用 track 函数进行追踪track(obj, 'value')return value}
}

然后再在scheduler中,调用trigger,取出effectFn执行,代码如下:

// computed内
const effectFn = effect(getter, {lazy: true,scheduler() {dirty = true;trigger(obj, 'value')},
});

那么现在,当obj.foo++时,就会重新执行console.log(sumRes.value),也就实现了当obj.fooobj.bar变化时,会重新执行console.log(sumRes.value)这个effect的效果,具体的逻辑可看下图:

执行过程

这就是整个computed的实现原理

小记

这是写的第四篇关于vue3.js响应式设计的内容了,但发现看的人还是比较少的,不管是评论还是收藏数都几乎为
0,不知道是写的不好还是其他的原因

写的初衷还是如同开头说的那般,书中即使讲的明白,但如果缺少一定的基础,在逻辑上还是比较难梳理的,写出来一方面是方便我自己复习,另一方面也是希望能够帮助到想了解或者进阶学习Vue的同学

关于这篇,如果认真阅读了,最起码可以达到以下效果

  1. 学会如何去实现懒执行函数
  2. 了解和学习什么是getter
  3. 知道Vue团队是如何设计和实现computed
  4. 响应式系统在computed的实现逻辑
  5. 面试时问到上述也会答得出
  6. 其他…

谢谢大家的阅读,如有错误的地方请私信笔者

笔者会在近期整理后续章节的笔记发布至博客中,希望大家能多多关注前端小王hs

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/360778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

谷歌云(GCP)4门1453元最热门证书限时免费考

谷歌云(GCP)最新活动,完成免费官方课程,送4门最热门考试免费考试券1张(每张价值200刀/1453元),这4门也包括最近大热的AI/ML考试,非常值得学习和参加,活动7/17截止 谷歌云是全球最火的三大云计算厂商(前两名AWS, Azure…

投票多功能小程序(ThinkPHP+Uniapp+FastAdmin)

🎉你的决策小助手! 支持图文投票、自定义选手报名内容、自定义主题色、礼物功能(高级授权)、弹幕功能(高级授权)、会员发布、支持数据库私有化部署,Uniapp提供全部无加密源码。​ 一、引言:为什么我们需要多功能投票小程序&#…

NSSCTF中的[WUSTCTF 2020]朴实无华、[FSCTF 2023]源码!启动! 、[LitCTF 2023]Flag点击就送! 以及相关知识点

目录 [WUSTCTF 2020]朴实无华 [FSCTF 2023]源码!启动! [LitCTF 2023]Flag点击就送! 相关知识点 1.intval 绕过 绕过的方式: 2.session伪造攻击 [WUSTCTF 2020]朴实无华 1.进入页面几乎没什么可用的信息,所以想到使用dis…

【c语言】二级指针

1,定义 本质还是从指针的角度去理解,只不过存的指针的值 2,使用方法

Android使用DevRing框架搭建数据库实体类以及使用

一、引用DevRing依赖 //导入DevRing依赖implementation com.ljy.ring:devring:1.1.8创建数据库表的依赖implementation org.greenrobot:greendao:3.2.2 // add libraryimplementation org.greenrobot:greendao-generator:3.0.0 二、修改工程目录下的.idea->gradle.xml文件&…

Golang笔记:使用serial包进行串口通讯

文章目录 目的使用入门总结 目的 串口是非常常用的一种电脑与设备交互的接口。这篇文章将介绍golang中相关功能的使用。 本文使用的包为 :go.bug.st/serial https://pkg.go.dev/go.bug.st/serial https://github.com/bugst/go-serial 另外还有一些常见的包如&…

Springboot民宿信息管理系统-计算机毕业设计源码08818

摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对民宿信息管理系统等问题,对民宿…

大模型应用研发基础环境配置(Miniconda、Python、Jupyter Lab、Ollama等)

老牛同学之前使用的MacBook Pro电脑配置有点旧(2015 年生产),跑大模型感觉有点吃力,操作起来有点卡顿,因此不得已捡起了尘封了快两年的MateBook Pro电脑(老牛同学其实不太喜欢用 Windows 电脑做研发工作&am…

Ant Design Vue Cascader 级联选择 错位问题

当Cascader 多个的时候 对应的下列会错位 如果滚动 他不会跟着元素 而是会跟着屏幕滚动&#xff0c;如下效果 解决方法 在Cascader 标题添加 getPopupContainer 属性监听对应的位置&#xff0c;返回对应的元素 <a-cascader class"smart-width-100 " v-model:…

Sam Altman:从少儿奇才到OpenAI掌舵人

自2022年底发布了ChatGPT以来&#xff0c;OpenAI及其首席执行官Sam Altman迅速成为科技界的焦点人物。Altman的崛起并非偶然&#xff0c;而是长期以来不断追求权力和创新的结果。本文将回顾Altman的成长历程&#xff0c;探索他如何一步步走向OpenAI的顶峰。 童年与教育背景 S…

亚马逊云科技官方活动:一个月拿下助理架构师SAA+云从业者考试认证(送半价折扣券)

为了帮助大家考取AWS SAA和AWS云从业者认证&#xff0c;小李哥争取到了大量考试半价50%折扣券&#xff0c;使用折扣券考试最多可省75刀(545元人民币)。 领取折扣券需要加入云师兄必过班群&#xff0c;在群中免费领取。目前必过班群招募到了超过200名小伙伴&#xff0c;名额有限…

YOLOv8关键点pose训练自己的数据集

这里写自定义目录标题 YOLOv8关键点pose训练自己的数据集一、项目代码下载二、制作自己的关键点pose数据集2.1 标注(非常重要)2.1.1 标注软件2.1.2 标注注意事项a.多类别检测框b.单类别检测框2.2 格式转换(非常重要)2.3 数据集划分三、YOLOv8-pose训练关键点数据集3.1 训练…

任务3.8.4 利用RDD实现分组排行榜

文章目录 1. 任务说明2. 解决思路3. 准备成绩文件4. 采用交互式实现5. 采用Spark项目实战概述&#xff1a;使用Spark RDD实现分组排行榜任务背景任务目标技术选型实现步骤1. 准备数据2. 数据上传至HDFS3. 启动Spark Shell4. 读取数据生成RDD5. 数据处理6. 计算TopN7. 输出结果8…

Instagram 算法更新?想要吸引更多新用户请打开这些设置!

为什么你发的IG就没人看&#xff1f;没流量&#xff1f;注意了&#xff01;IG算法已更新&#xff0c;了解最新算法、学会这些设置&#xff0c;你的IG自然能吸引到越来越多用户关注&#xff01; Instagram 算法更新 1️⃣ 根据Instagram官方的表述&#xff0c;他们对算法进行了调…

分享一个好用的图幅号计算器

如果在你的工作中会分幅处理地图数据&#xff0c;也许这个好用的图幅号计算器能对你有所帮助。 你只需要在该工具中输入经纬度坐标&#xff0c;就可以为你计算出各个比例尺下的图幅号&#xff0c;你可以在文末查看该工具的领取方法。 一个好用的图幅号计算器 该图幅计算器工…

Redis的持久化方式和注意点

redis持久篇 两种持久化技术&#xff1a; AOF日志和RDB快照 Redis默认会开启RBD快照 AOF:持久化只会记录写操作命令。 是一种日志&#xff0c;写入到文件&#xff0c;有相应的格式文本 就是 Redis 里的AOF(Append Only File)持久化功能&#xff0c;注意只会记录写操作命令…

【C++STL】Vector扩容机制

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

网络安全事件研判

研判&#xff08;入侵检测&#xff09; 研判我理解为人工层面对入侵检测事件进行再分析&#xff0c;即借助已有的设备告警根据经验判断是否为真实攻击 研判工作要充分利用已有安全设备&#xff08;需要提前了解客户的网络拓扑以及部署设备情况&#xff09;&#xff0c;分析其近…

代码随想录算法训练营第三十四天|56. 合并区间、738.单调递增的数字、968.监控二叉树

56. 合并区间 题目链接&#xff1a;56. 合并区间 文档讲解&#xff1a;代码随想录 状态&#xff1a;无语&#xff0c;这题从右边界排序做不了&#xff01; 思路&#xff1a; 排序&#xff1a;按照区间的起始位置进行排序&#xff0c;这样后面处理时可以顺序合并重叠区间。合并…

记因hive配置文件参数运用不当导致 sqoop MySQL导入数据到hive 失败的案例

sqoop MySQL导入数据到hive报错 ERROR tool.ImportTool: Encountered IOException running import job: java.io.IOException: Hive exited with status 64 报错解释&#xff1a; 这个错误表明Sqoop在尝试导入数据到Hive时遇到了问题&#xff0c;导致Hive进程异常退出。状态码…