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

本文详细解析了Vue3源码中事件的处理机制,包括如何通过缓存避免因多次渲染导致的事件冲突,并介绍了runtime-dom中index.ts的重要操作。重点讲解了event.ts中的事件缓存逻辑和runtime-dom入口文件的代码实现。
摘要由CSDN通过智能技术生成

课程地址:【已完结】全网最详细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文件中,添加如下代码:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值