【学习笔记】Vue3源码解析:第二部分-实现响应式(4)

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

第二部分-实现响应式(4):(对应课程的第15-17节)

第15节:《处理数组修改或者新增》

1、在操作符中新增:

在这里插入图片描述

2、在shared中增加公告方法 hasChange :

在这里插入图片描述

3、在 createSetter 中增加如下逻辑:为目标对象添加新值或访问其已有值时,触发trigger方法,这个方法负责触发更新:

在这里插入图片描述

第16节:《处理对象的触发更新》

1、在 effect.ts中定义trigger方法,打印参数值进行测试:

在这里插入图片描述

2、测试过程中发现没有打印出预期结果,排查发现赋值操作写到了获取老值上面,修改为如下顺序:

在这里插入图片描述

3、打印结果如下:

在这里插入图片描述

4、trigger方法中添加如下逻辑:在存储effect的表结构targetMap中,找到目标对象对应的map,并在这个map中取出key对应的set,这个set中存储的即是目标对象的这个key被读取时收集到的effect:

在这里插入图片描述

5、继续添加如下逻辑:写一个add方法,入参为目标对象的key对应的set,即存储的收集到的effect的set集合,在add方法中,遍历这个set集合,并将其中每个元素添加进另外一个准备好的set集合effectSet中。之所以遍历收集到的effect的set集合并将每个元素又放入另一个Set集合,是为了去除重复。

add方法执行完成后,遍历effectSet,执行其中的每一个effect:

在这里插入图片描述

第17节:《处理数组的触发更新》

1、针对修改数组长度的特殊处理:

在这里插入图片描述

2、

(备注:这一节我听得不是特别明白,笔记暂时不完善,待后续继续整理完善;如有已理解此部分的小伙伴也请不吝赐教,帮忙指点一二,谢谢!)

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

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

相关文章

信钰证券:四川黄金超50亿元解禁,紫金矿业等解禁股东浮盈超200%

本周A股限售股解禁规划不到400亿元,环比下降。 除掉新上市公司,本周共有43家公司限售股解禁,解禁数量28.91亿股,以最新收盘价计算(下同),解禁市值387.66亿元。 其间,解禁市值超越1…

2.2 mul、div、and、or乘除指令及所有寄存器英文名

汇编语言 1. mul乘指令 两个相乘的数,要么都是8位,要么都是16位 两个8位数相乘 一个默认放在al中,另一个放在8位reg或内存字节单元中8位乘法,结果默认放在ax中例如:计算100*10 100和10小于255,可以做8位…

Java配置49-nginx 反向代理 sftp 服务器

1. 背景 后端服务需要通过部署在跳板机上的 nginx 访问一个外网的 SFTP 服务器。 2. 方法 nginx从 1.9.0 开始,新增加了一个stream模块,用来实现四层协议的转发、代理或者负载均衡等。 首先检查 nginx 版本信息及是否安装了 stream 模块。 进入 ngi…

CommandLineRunner的使用

背景 在项目启动时需要做一些数据预加载或者某些操作,需要怎么办呢,方法其实有好几种,这里主要讲一下SpringBoot提供的CommandLineRunner接口的使用。一、案例说明以及实现 1.实现CommandLineRunner接口 定义一个类实现CommandLineRunner接…

Matlab 最小二乘插值(曲线拟合)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 在多项式插值时,当数据点个数较多时,插值会导致多项式曲线阶数过高,带来不稳定因素。因此我们可以通过固定幂基函数的最高次数 m(m < n),来对我们要拟合的曲线进行降阶。之前的函数形式就可以变为: 二、实现…

QPaint练习000(绘制坐标轴+码表盘)

参考 参考 mychart.h #ifndef MYCHART_H #define MYCHART_H#include <QWidget> #include <QPainter> #include <QString>struct DataNode {int value;QString key; };typedef struct {QString label;double width;QColor color; } CvsInfo;// MyChart继承…

EdgeX Foundry - MQTT 设备服务

文章目录 一、MQTT 设备服务1.概述2.服务配置3.协议属性4.多级 Topics4.1.异步数据4.2.命令 二、连接 MQTT 设备1.docker-comepse2.设备配置文件3.安装自定义配置4.启动 EdgeX Foundry5.创建 MQTT 设备模拟器6.访问 UI6.1. consul6.2. EdgeX Console 7.测试7.1.命令7.2.事件7.3…

命令行启动mongodb服务器的问题及解决方案 -- Unrecognized option: storage.journal

目录 mongodb命令行启动问题 -- Unrecognized option: storage.journal问题日志&#xff1a;问题截图&#xff1a;问题来源&#xff1a;错误原因&#xff1a;解决方式&#xff1a; mongodb命令行启动问题 – Unrecognized option: storage.journal 同样是格式出问题的问题分析和…

如何为在线课程定价以获得最大收益(7个步骤)

如果您是独立内容创建者或小创业者&#xff0c;希望用 WordPress LMS 在线学习和教练网站获利&#xff0c;您可能会意识到构建在线课程并非易事。 您可能已经浏览了迷宫般的选择&#xff1a; 弄清楚要教什么主题&#xff1b;收集您需要的所有设备&#xff1b;决定弹出的标题和…

如何自己系统的学python

学习Python是一项很好的投资&#xff0c;因为它是一种既强大又易于学习的编程语言&#xff0c;适用于多种应用&#xff0c;如数据分析、人工智能、网站开发等。下面是一个系统学习Python的步骤建议&#xff1a; 基础准备 安装Python&#xff1a; 访问Python官网下载最新版本的…

冒泡排序 和 qsort排序

目录 冒泡排序 冒泡排序部分 输出函数部分 主函数部分 总代码 控制台输出显示 总代码解释 冒泡排序优化 冒泡排序 主函数 总代码 代码优化解释 qsort 排序 qsort 的介绍 使用qsort排序整型数据 使用qsort排序结构数据 冒泡排序 首先&#xff0c;我先介绍我的冒泡…

ARM总结and复习

安装交叉编译工具链 a. 为什么安装 因为arm公司的指令集在不断迭代升级&#xff0c;指令集日益增多,而架构是基于指令集研发的&#xff0c;所以架构不一样&#xff0c;指令集也不一样 eg:arm架构使用的是arm指令集 x86架构使用的是x86指令集 而我们日常开发环境中linux的架构…