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

相关推荐
小磊哥er2 分钟前
深入解构Claude Code - 第 8 篇 · 数据放哪、钱怎么算
javascript·ai编程
「QT(C++)开发工程师」12 分钟前
C++ auto 用法详解
开发语言·c++
OPEN-F19 分钟前
C++STL教程:容器适配器与实用工具
开发语言·c++
yaoxin52112330 分钟前
507. Java 反射 - 在 BeanFactory 中实现依赖注入
java·开发语言
OPEN-F36 分钟前
C++模板教程:变参模板、折叠表达式与SFINAE
java·开发语言·c++
有点。39 分钟前
C++二叉搜索树进阶
开发语言·c++
HugoStudio_SWAN43 分钟前
【擦除重绘】C++ 控制台动画:弹跳 Logo DVD 屏保效果
开发语言·c++·学习·程序人生
kyriewen2 小时前
我装了30多个Skill,给AI安排了8个岗位
前端·javascript·ai编程
风骏时光牛马2 小时前
大模型落地实践中的技术选型思路与方案对比
前端
IT_陈寒2 小时前
Vite打包时的静态资源坑,我帮你踩过了
前端·人工智能·后端