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

相关推荐
天天进步20156 分钟前
Python全栈项目--协同办公平台
开发语言·python
JAVA面经实录9177 分钟前
集合框架 (六)
java·开发语言
xzlAwin13 分钟前
Go语言多版本管理器g工具命令
开发语言·golang
少控科技16 分钟前
农场设备管理代码(2)
开发语言·c#
周GZ1 小时前
简单讲解Java中静态方法与 实例方法
java·开发语言
扫一屋1 小时前
Element Plus 源码级深度定制:不 Fork、不改包,用 Vite 插件实现组件行为运行时改造
前端
BigTopOne2 小时前
KOOM 学习计划
前端
大白同学4212 小时前
初识Qt——创建第一个Qt项目
开发语言·qt
祈禾2 小时前
计算机组成原理之编译、汇编、链接、解释
开发语言·汇编·笔记·学习
吴声子夜歌2 小时前
正则指引——Ruby
开发语言·正则表达式·ruby