vue3 diff源码梳理学习笔记

1、只比较同层

2、双端比较

3、判断流程

1、先判断是否是首次渲染;

2、vnode oldvnode 指向同一个对象?

3、oldvnode dom 关联到真实的元素上,依次更新dom上的属性,class style props events;

4、针对简单的文本节点 只需要更新文本内容

5、oldVnode 有子节点,vnode 没有子节点,直接删除oldVnode下的子节点

6、oldVnode 没有子节点,vnode有子节点,直接更新oldVnode下增加子节点

7、oldVnode vnode 都有子节点,则进行子节点对比。

4、patchVnode核心逻辑

1、先比较key,根据 头头,尾尾,头尾,尾头,四种比较类型;当key相同的时候,就进入比较;

相关推荐
apcipot_rain几秒前
【天梯赛】2026天梯赛模拟赛——题解
开发语言·c++·算法·蓝桥杯·天梯赛
KevinWang_3 分钟前
AI 基础设施及其应用
前端
Rust研习社3 分钟前
Rust 堆内存指针 Box 详解
开发语言·后端·rust
AIFarmer4 分钟前
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次。
前端·npm·node.js
小红的布丁8 分钟前
Redis 集群详解:主从哨兵和切片集群有什么区别
前端·数据库·redis
liulilittle11 分钟前
Lua 浮点数比较
开发语言·junit·lua
yuyuyuliang0022 分钟前
python笔记1
开发语言·笔记·python
摇滚侠24 分钟前
Groovy 如何给集合中添加元素
java·开发语言·windows·python
~plus~24 分钟前
C# 事件溯源与 CQRS 架构:用 EventStoreDB 打造可靠系统
开发语言·架构·c#
江奖蒋犟27 分钟前
【C++】红黑树
开发语言·c++