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

相关推荐
炸膛坦客20 小时前
单片机/C/C++八股:(十五)内存对齐、结构体内存对齐
c语言·开发语言·单片机
娇娇yyyyyy20 小时前
QT编程(13): Qt 事件机制eventfilter
开发语言·qt
bcbobo21cn20 小时前
C# byte类型和byte数组的使用
开发语言·c#·字节数组·byte类型
计算机安禾20 小时前
【C语言程序设计】第37篇:链表数据结构(一):单向链表的实现
c语言·开发语言·数据结构·c++·算法·链表·蓝桥杯
阿贵---20 小时前
C++构建缓存加速
开发语言·c++·算法
Dxy123931021620 小时前
CSS常用样式详解:从基础到进阶的全面指南
前端·css
IT_陈寒21 小时前
SpringBoot自动配置揭秘:5个让开发效率翻倍的隐藏技巧
前端·人工智能·后端
Moment21 小时前
前端工程化 + AI 赋能,从需求到运维一条龙怎么搭 ❓❓❓
前端·javascript·面试
紫丁香21 小时前
pytest_自动化测试3
开发语言·python·功能测试·单元测试·集成测试·pytest
bearpping21 小时前
java进阶知识点
java·开发语言