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相同的时候,就进入比较;

相关推荐
架构师汤师爷几秒前
一文彻底搞懂 OpenClaw 的架构设计与运行原理(万字图文)
前端·agent
苑若轻航1 分钟前
防抖和节流:解决高频事件性能
前端
小黑的铁粉4 分钟前
什么是事件循环?调用堆栈和任务队列之间有什么区别?
前端·javascript
小黑的铁粉4 分钟前
常见的内存泄漏有哪些?
前端·javascript
喝水的长颈鹿5 分钟前
JavaScript 基础入门
前端
喝咖啡的女孩6 分钟前
call、apply、bind 原理与实现
前端
雨落Re6 分钟前
从设计到开发,过年我用十天使用AI搭建了一个完整的博客系统
前端·后端
m0_531237179 分钟前
C语言-数组练习进阶
c语言·开发语言·算法
冴羽16 分钟前
100s 带你了解 Bun 为什么这么火
前端·node.js·bun
Sylvia33.19 分钟前
火星数据:解构斯诺克每一杆进攻背后的数字语言
java·前端·python·数据挖掘·数据分析