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

相关推荐
星夜泊客11 分钟前
C# 基础:为什么类可以在静态方法中创建自己的实例?
开发语言·经验分享·笔记·unity·c#·游戏引擎
CappuccinoRose13 分钟前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
FFF-X23 分钟前
前端字符串模糊匹配实现:精准匹配 + Levenshtein 编辑距离兜底
前端
消失的旧时光-194323 分钟前
从拷贝到移动:C++ 移动构造与移动赋值是怎么被逼出来的?(附完整示例)
开发语言·c++
古译汉书24 分钟前
部分.exe文件打开但是一直显示界面,点击任务栏持续无反应
开发语言·单片机·嵌入式硬件
2301_8174973328 分钟前
C++中的装饰器模式高级应用
开发语言·c++·算法
m0_5494166632 分钟前
C++编译期字符串处理
开发语言·c++·算法
m0_5811241932 分钟前
C++中的适配器模式实战
开发语言·c++·算法
Hi_kenyon33 分钟前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
Coding茶水间38 分钟前
基于深度学习的狗品种检测系统演示与介绍(YOLOv12/v11/v8/v5模型+Pyqt5界面+训练代码+数据集)
开发语言·人工智能·深度学习·yolo·目标检测·机器学习