当前位置: 首页 > news >正文

【学习笔记】Vue3源码解析:第三部分-获取computed的值;实现computed

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码)

第三部分-获取computed的值;实现computed:(对应课程的第18-21节)

第22节:《获取computed的值》

首先了解一下官网对computed的介绍:

在这里插入图片描述

1、在源码中使用computed,发现computed的两个特性:

(1)“懒执行”:computed定义的值,如果没有在视图中或组件中读取或使用,是不会触发computed里传入的函数的。

在这里插入图片描述

当使用时才会执行,这里是一个“懒执行”:

在这里插入图片描述

在这里插入图片描述

(2)缓存机制:多次使用computed值时,在其依赖计算的age值没有发生变化的情况下,不会多次执行,只会执行一次,即有缓存机制;其缓存机制是通过一个 _dirty 属性控制的。

在这里插入图片描述

在这里插入图片描述

1秒钟后改变age的值,需要注意的是,此时 computed 并不会执行两次,因为虽然age值变化了,但它变化后没有再次使用依赖它得到的计算属性 myAge。

在这里插入图片描述

1秒钟后改变age的值后并再次使用其值,此时才会再次执行computed:

在这里插入图片描述

在这里插入图片描述

将计算属性值打印出来观察:

在这里插入图片描述

2、在 reactivity 下新建computed.ts 文件,并在入口文件中暴露 computed 方法:

在这里插入图片描述

3、在 computed.ts 文件中编写如下逻辑。可以发现,computed()与effect()有一定的相似之处,当computed()传入的是一个方法时,都会去执行传入的方法,且在这个方法里访问到的数据会进行收集依赖,但不同的是,effect()是默认执行的,而computed()是默认不执行的:

在这里插入图片描述

4、引入 isFunction 方法与effect:

在这里插入图片描述

5、定义 ComputedRefImpl 类:在 constructor 中保存effect方法,在 value 值的 get 方法中去执行这个effect,也就是计算属性在没有使用这个值时不会执行传入的计算方法。

在这里插入图片描述
在这里插入图片描述

6、回顾 effect.ts 中定义的 effect方法:

在这里插入图片描述

在这里插入图片描述

7、examples下新建 6.computed.html文件,在其中测试刚刚编写的 computed 方法:效果如源码中一样,在未访问时,控制台没有输出;访问这个计算属性值时,控制台才输出了“缓存机制”与其值。

在这里插入图片描述

第23节:《实现computed》

(接上节)

8、但此时我们实现的有个问题:在重复访问时没有缓存机制,会重复执行计算属性的方法:

在这里插入图片描述
在这里插入图片描述

9、增加红框一行代码,解决没有缓存机制的问题:将初始为true的this._dirty属性置为false,这样,只要依赖值不改变,无论访问多少次,都会直接返回上一次的结果。

在这里插入图片描述
在这里插入图片描述

10、增加红框部分代码,为effect配置项增加一个参数 sch,它是一个方法,负责将 this._dirty 的值变为 true。这个方法需要在什么时候执行?在该计算属性的依赖值被重新赋值时执行。因为计算属性的依赖值被重新赋值时,需要重新获取计算属性的值。

在这里插入图片描述

11、计算属性的依赖值被重新赋值时,会触发 trigger 方法,执行收集到的effect,来进行触发更新。回到我们之前写好的 effect.ts 中的trigger方法中,执行收集到的effect的代码部分:

在这里插入图片描述

12、在这里,执行收集到的effect时,增加如下逻辑:判断该effect的配置对象中是否有 sch参数,有的话则执行这个函数,即将计算属性中定义的 _dirty 置为true:

这里我有两个疑问点:一个是:上面截图的代码是遍历并执行effectSet中的每一个effect的,为什么到了下面截图里,判断effect.options.sch有值时,就执行了sch这个函数,而不再去执行这个effect了呢?另一个是:为什么执行sch时,要把effect作为参数传递进去?在sch函数中比没有定义形参呢?而且我测试不传递这个effect,效果也和老师讲得一样,所以不知道为什么要传递?——待后续思考明白,或者有通晓vue3源码的小伙伴帮忙指点一下~

在这里插入图片描述

13、增加set获取函数:

在这里插入图片描述

在这里插入图片描述

相关文章:

【学习笔记】Vue3源码解析:第三部分-获取computed的值;实现computed

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第三部分-获取computed的值;实现computed:(对应课程的第18-21节) 第22节:《获取computed的值》 …...

顺序表(C语言版)

前言:本篇文章我们来详细的讲解一下顺序的有关知识,这篇文章中博主会以C语言的方式实现顺序表。以及用顺序表去实现通讯录的代码操作。 目录 一.顺序表的概念 二.顺序表的分类 1.静态顺序表 三.动态顺序表的实现 1.顺序表的初始化 2.顺序表的尾插…...

Python高质量函数编写指南

The Ultimate Guide to Writing Functions 1.视频 https://www.youtube.com/watch?vyatgY4NpZXE 2.代码 https://github.com/ArjanCodes/2022-funcguide Python高质量函数编写指南 1. 一次做好一件事 from dataclasses import dataclass from datetime import datetimedatacl…...

探索Spring、Spring Boot和Spring Cloud的奇妙关系(二)

本系列文章简介: 在当今快节奏、高竞争的软件开发世界中,构建可靠、高效的应用程序是至关重要的。而Spring框架一直以来都是业界领先的Java开发框架之一,帮助开发者简化了复杂的任务,并提供了丰富的功能和强大的支持。 然而&#…...

Mysql的事务隔离级别以及事务的四大特性。

MySQL 的事务隔离级别是数据库管理系统中的一个重要概念,它决定了事务如何隔离和影响其他并发事务。MySQL 支持四种事务隔离级别,分别是:读未提交(READ UNCOMMITTED)、读已提交(READ COMMITTED)…...

人工智能_大模型023_AssistantsAPI_01_OpenAI助手的创建_API的调用_生命周期管理_对话服务创建---人工智能工作笔记0159

先来说一下一些问题: 尽量不要微调,很麻烦,而且效果需要自己不断的去测试. 如果文档中有图表,大量的图片去分析就不合适了. 是否用RAG搜索,这个可以这样来弄,首先去es库去搜能直接找到答案可以就不用去RAG检索了,也可以设置一个分,如果低于60分,那么就可以去进行RAG检索 微…...

锁策略总结

锁策略 悲观锁和乐观锁 乐观锁和悲观锁不是具体类型的锁而是指两种不同的对待加锁的态度,这两个锁面对锁冲突的态度是相反的。 乐观锁:认为不存在很多的并发操作,因此不需要加锁。悲观锁:认为存在很多并发操作,因此需…...

蓝桥杯备考day2

1.1 map及其函数 map 提供一对一的数据处理能力,由于这个特性,它完成有可 能在我们处理一对一数据的时候,在编程上提供快速通道。map 中的第一 个值称为关键字(key),每个关键字只能在 map 中出现一次,第二个称为该 关…...

Mac电脑安装蚁剑

1: github 下载源码和加载器:https://github.com/AntSwordProjectAntSwordProject GitHubAntSwordProject has 12 repositories available. Follow their code on GitHub.https://github.com/AntSwordProject 以该图为主页面:antSword为源码…...

品牌百度百科词条创建多少钱?

百度百科作为国内最具权威和影响力的知识型平台,吸引了无数品牌和企业争相入驻。一个品牌的百度百科词条,不仅是对品牌形象的一种提升,更是增加品牌曝光度、提高品牌知名度的重要途径。品牌百度百科词条创建多少钱,这成为了许多企…...

Linux安装及管理程序

目录 一.Linux应用程序基础 1.应用程序与系统命令的关系 2.典型应用程序的目录结构 3.常见的Linux软件包封装类型 二.RPM 软件包管理工具 1.RPM 软件包管理器 Red-Hat Package Manger 2.RPM软件包 3.RPM命令 三.源代码编译安装 1. yum 软件包管理器: 配…...

Mybatis generate xml 没有被覆盖

添加插件即可 <plugin type"org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin"/>...

MercadoLibre(美客多)入仓预约系统操作流程-自动化约号(开篇)

目录 一、添加货件信息 二、输入货件信息 三、选择发货 四、填写交货日期 五、注意事项 MercadoLibre&#xff08;美客多&#xff09;于2021年10月18号上线了新预约入仓系统&#xff0c;在MercadoLibre美客多平台上&#xff0c;新入仓预约系统是一项非常重要的功能&#x…...

Unity TextMeshProUGUI 获取文本尺寸·大小

一般使用ContentSizeFitter组件自动变更大小 API 渲染前 Vector2 GetPreferredValues(string text)Vector2 GetPreferredValues(string text, float width, float height)Vector2 GetPreferredValues(float width, float height) 渲染后 Vector2 GetRenderedValues()Vector…...

Sonar下启动发生错误,elasticsearch启动错误

Download | SonarQube | Sonar (sonarsource.com) 1.首先我的sonar版本为 10.4.1 &#xff0c;java版本为17 2.sonar启动需要数据库,我先安装了mysql, 但是目前sonar从7.9开始不支持mysql&#xff0c;且java版本要最少11,推荐使用java17 3.安装postsql,创建sonar数据库 4.启…...

Git常用命令以及异常信息汇总

常用命令&#xff1a; 查看本地分支&#xff1a; git branch 创建一个新仓库 git clone 仓库地址xxxxx cd 目标目录 git switch -c main touch README.md git add README.md git commit -m "add README" git push -u origin main 推送现有文件夹 cd 目标目录 git in…...

解释Python中的RESTful API设计和实现

解释Python中的RESTful API设计和实现 RESTful API&#xff0c;即符合REST&#xff08;Representational State Transfer&#xff0c;表述性状态转移&#xff09;架构风格的Web服务接口&#xff0c;已成为现代Web应用程序通信的标准。Python作为一种灵活且强大的编程语言&…...

一、Nginx部署

Nginx部署 一、Docker部署1.复制Nginx配置文件2.启动Nginx容器 一、Docker部署 1.复制Nginx配置文件 # 1.拉取镜像 docker pull nginx # 2.启动nginx容器 docker run --restartalways --namenginx -p 80:80 -d nginx # 3.宿主机创建挂载目录 mkdir /root/docker/nginx -p # 4…...

C语言基础---指针的基本语法

概述 内存地址 在计算机内存中&#xff0c;每个存储单元都有一个唯一的地址(内存编号)。通俗理解&#xff0c;内存就是房间&#xff0c;地址就是门牌号 指针和指针变量 指针&#xff08;Pointer&#xff09;是一种特殊的变量类型&#xff0c;它用于存储内存地址。指针的实…...

记录--病理切片图像处理

简介 数字病理切片&#xff0c;也称为全幻灯片成像&#xff08;Whole Slide Imaging&#xff0c;WSI&#xff09;或数字切片扫描&#xff0c;是将传统的玻片病理切片通过高分辨率扫描仪转换为数字图像的技术。这种技术对病理学领域具有革命性的意义&#xff0c;因为它允许病理…...

Android使用shape属性绘制边框内渐变色

目录 先上效果图实现方法shape属性介绍代码结果 先上效果图 这是使用AndroidStudio绘制的带有渐变色的边框背景色 实现方法 项目中由于UI设计需求&#xff0c;需要给按钮、控件设置带有背景色效果的。以下是UI效果图。 这里我们使用shape属性来绘制背景效果。 shape属性介…...

分类算法(数据挖掘)

目录 1. 逻辑回归&#xff08;Logistic Regression&#xff09; 2. 支持向量机&#xff08;Support Vector Machine, SVM&#xff09; 3. 决策树&#xff08;Decision Tree&#xff09; 4. 随机森林&#xff08;Random Forest&#xff09; 5. K近邻&#xff08;K-Nearest …...

scaling laws for neural language models

关于scaling law 的正确认识 - 知乎最近scaling law 成了最大的热词。一般的理解就是&#xff0c;想干大模型&#xff0c;清洗干净数据&#xff0c;然后把数据tokens量堆上来&#xff0c;然后搭建一个海量H100的集群&#xff0c;干就完了。训练模型不需要啥技巧&#xff0c;模型…...

水经微图IOS版5.2.0发布

随时随地&#xff0c;微图一下&#xff01; 水经微图&#xff08;简称“微图”&#xff09;IOS新版已上线。 在该版本中主要新增图层树节点排序功能、常规&#xff08;矩形、圆、椭圆、扇形&#xff09;绘制功能、地形夸张等主要功能。 当前版本 当前版本号为&#xff1a;5…...

聚观早报 | 哪吒L上市定档;iPhone 16最新高清渲染图

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月10日消息 哪吒L上市定档 iPhone 16最新渲染图 华为太空表与问界M9联动 蔚来万里长城加电风景线正式贯通 Red…...

【C++】手搓 list 容器

送给大家一句话&#xff1a; 若结局非你所愿&#xff0c;就在尘埃落定前奋力一搏。—— 《夏目友人帐》 手搓 list 容器 1 前言1.1 底层结构1.2 使用场景1.3 功能简介 2 框架搭建2.1 节点类2.2 list 类2.3 迭代器类 3 功能实现3.1 begin() 与 end()3.2 插入操作3.3 删除操作3…...

LinkedList用法详解(Java)

LinkedList LinkedList 是 Java 中的一个常用类&#xff0c;它实现了 List 接口&#xff0c;采用双向链表数据结构。 1. 创建 LinkedList 对象 import java.util.LinkedList;LinkedList<String> linkedList new LinkedList<>();2. 添加元素 linkedList.add(&q…...

34. 在排序数组中查找元素的第一个和最后一个位置

Problem: 34. 在排序数组中查找元素的第一个和最后一个位置 文章目录 思路解题方法复杂度Code 思路 二分查找&#xff0c; 口诀&#xff1a;左右右&#xff0c;求左段区间的右端点&#xff0c;动r 解题方法 两次二分查找 复杂度 时间复杂度: O ( l o g n ) O(logn) O(logn) 二…...

音乐文件逆向破解

背景 网易云等在线音乐文件的加密源码都按照一定的规则加密&#xff0c;通过对音乐文件的源码分析转化&#xff0c;有望实现对加密文件的解密 实现内容 实现对加密音乐文件的解密 实现对无版权的音乐文件的转化 实现环境 010editor 010 Editor是一个专业的文本编辑器和十六…...

xhci 数据结构

xhci 数据结构 xhci 数据结构主要在手册上有详细的定义&#xff0c;本文根据手册进行归纳总结&#xff1a; 重点关注的包括&#xff1a; device contexttrb ringtrb device context设备上下文 设备上下文数据结构由xHC管理&#xff0c;用于向系统软件报告设备配置和状态信息。…...

u盘做网站/宁波seo在线优化方案

ubuntu server配置xmanagerubuntu是典型的多用户多任务操作系统&#xff0c;通过XDMCP方式可以轻松的实现远程的多用户同时登录ubuntu任务.www.2cto.com 【10.04版本】的处理方法&#xff1a;1. sudo gedit /etc/gdm/gdm.schemas 找到Xml代码<schema><key>xdmcp/…...

有哪些调查网站可以做兼职/黑龙江网络推广好做吗

题目描述 请实现一个函数&#xff0c;将一个字符串中的每个空格替换成“%20”。例如&#xff0c;当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。方法一&#xff1a;新建一个字符串进行替换 * 创建一个新的buffer对象 对原来的字符串进行遍历 遇到一个数值…...

做一家公司网站要注意哪些/怎么制作网页链接

Redis常用的数据类型 Redis的五种常用的数据类型分别是&#xff1a;String、Hash、List、Set和Sorted set Redis的使用场景 1.Counting&#xff08;计数&#xff09; 2.展示最近、最热、点击率最高、活跃度最高等等条件的top list 3.用户最近访问记录也是redis list的很好应用…...

wordpress phpstorm/app开发需要多少钱

副标题——会报喜的项目经理才可能成功 【项目经理之修炼】 全文索引 这几天&#xff0c;小赵兴高采烈的&#xff0c;为什么呢&#xff1f;项目验收成功了&#xff0c;他做项目经理的项目圆满成功了。这一天&#xff0c;老孙叫住了他&#xff1a;“项目做完了&#xff1f;”“是…...

集团为什么做网站/sem管理工具

&#x1f320; 『精品学习专栏导航帖』 &#x1f433;最适合入门的100个深度学习实战项目&#x1f433;&#x1f419;【PyTorch深度学习项目实战100例目录】项目详解 数据集 完整源码&#x1f419;&#x1f436;【机器学习入门项目10例目录】项目详解 数据集 完整源码&…...

网站建设话术/今日要闻 最新热点

1、简单介绍 比例份额&#xff08;proportional-share&#xff09;算法基于一个简单的想法&#xff1a;调度程序的最终目标&#xff0c;是确保每个工作获得一定比例的 CPU 时间&#xff0c;而不是优化周转时间和响应时间。 他有一种简单的实习——彩票调度&#xff08;lottery …...