【学习笔记】Vue3源码解析:第四部分- runtime-dom(2)

ops/2024/9/20 15:37:00/

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

第四部分-:(对应课程的第27-28节)

第27节:《事件的处理》

1、在 event.ts 中编写如下代码:由于给元素添加事件是通过 addEventListener 实现的,如果再次渲染绑定的onClick事件更新了,如从绑定fn事件,改为绑定fn1事件,如果再次执行 addEventListener 绑定fn1,原来绑定的fn还会存在。

因此,大体思路是:将元素绑定的事件进行缓存,缓存到一个对象中,键为事件名,即onClick,值为绑定的方法,即fn;如果在缓存对象中存在这个事件了,且新一次渲染也有事件,则用新绑定的事件替换缓存对象中的老事件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

event.ts 中的完整代码如下:(todo:这里不是太懂,尤其是createInvoker这个函数里的逻辑)

在这里插入图片描述

第28节:《runtime-dom的全部操作处理》

1、runtime-dom 文件夹的入口文件index.ts文件中,添加如下代码:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/ops/9623.html

相关文章

SEW减速机参数查询 2-2 实践

首先说说结论:在不和SEW官方取得沟通之前,你几乎无法直接通过查阅SEW官方文档得到相关减速机的所有技术参数:比如轴的模数和齿数,轴承的参数。我在周一耗费了一个上午,最终和SEW方面确认后才知晓相关技术参数需要凭借销…

针对窗口数量多导致窗口大小显示受限制的问题,使用滚动条控制窗口

建议:首先观察结果展示,判断是否可以满足你的需求。 目录 1. 问题分析 2. 解决方案 2.1 界面设计 2.2 生成代码 2.3 源码实现 3. 结果展示 1. 问题分析 项目需要显示的窗口数量颇多,主界面中,如果一次性显示全部窗口&#x…

rst文件是什么?如何阅读rst文件

左手编程,右手年华。大家好,我是一点,关注我,带你走入编程的世界。 公众号:一点sir,关注领取编程资料 如果有阅读过Python源码的同学一定知道,Python社区的相关的帮助文件是用rst结尾的文档格式…

kafka 的零拷贝原理

在实际应用中,如果我们需要把磁盘中的某个文件内容发送到远程服务器上,那么它必须经过几个拷贝的过程。 从磁盘中读取目标文件内容拷贝到内核缓冲区CPU 控制器再把内核缓冲区的数据赋值到用户空间的缓冲区中接着在应用程序中,调用 write(&am…

文心一言与GPT-4全面对比——人工智能语言模型的新纪元

随着人工智能领域的快速发展,各种高级语言模型相继问世,它们在文本生成、自然语言理解、对话系统等多个方面展示了惊人的能力。其中,最为瞩目的便是OpenAI发布的GPT-4和国内百度的文心一言。这两个模型都被设计用来处理复杂的语言理解和生成任…

Stable Diffusion模型介绍

在深度学习和人工智能领域,Stable Diffusion模型作为一项前沿技术,已经引起了广泛的关注。本文将深入探讨Stable Diffusion模型的种类、特点以及它们在不同场景下的应用。 1. CheckPoint模型 Checkpoint模型是Stable Diffusion系列中的主模型&#xff…

【C++ STL序列容器】array 数组

文章目录 【 1. 基本原理 】【 2. array 的创建 】2.1 不赋初值2.2 赋默认值2.3 赋指定值 【 3. array 的成员函数 】实例 【 1. 基本原理 】 array 是在 C 普通数组的基础上添加了一些成员函数和全局函数。在使用上,它 比普通数组更 安全,且效率并没…

r-tree 总结

R树是一种用于空间搜索的空间索引结构。它们特别适用于索引多维数据,尤其是在地理信息系统(GIS)和空间数据库中。R树(R-tree)是一种用于高维空间索引的数据结构,经常用于数据库和地理信息系统(GIS)中。下面是R树的总结: 基本概念:R树将空间对象组织成一个包含多个边界…