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

相关推荐
瞭望清晨5 分钟前
Python多进程使用场景
开发语言·python
Aurorar0rua6 分钟前
CS50 x 2024 Notes C - 02
前端
海参崴-24 分钟前
C++代码格式规范
java·前端·c++
怎么没有名字注册了啊30 分钟前
崩溃解决_Qt子窗口关闭按钮后打开崩溃
开发语言·qt
Dxy123931021637 分钟前
JavaScript 如何捕获异常:从基础到进阶的完整指南
开发语言·javascript·udp
谢尔登42 分钟前
【React】setState 触发渲染的流程
前端·react.js·前端框架
!停1 小时前
C++入门—初阶模板
开发语言·c++
so2F32hj21 小时前
拆解 OpenHands(14)--- Microagents
java·开发语言
Jp7gnUWcI1 小时前
C++ 内存避坑指南:如何用移动语义和智能指针解决“深拷贝”与“内存泄漏”
开发语言·c++
摸鱼仙人~1 小时前
Vue中markdown-it基础使用教程
前端·javascript·vue.js