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

相关推荐
小玮看世界39 分钟前
[Python]从“脏”数据到优雅实现:一个IoT滑动窗口最大值问题的测试驱动优化实录
linux·前端·python
吹什么轩1 小时前
c++复习:map和set的使用
开发语言·c++
尤乐娃子1 小时前
进入大厂(厂子大)实习Day11
前端·笔记·实习
必须得开心呀1 小时前
qt生成dump文件并定位异常
开发语言·qt
fpcc1 小时前
跟我学C++中级篇—内存流
开发语言·c++
xiaoxiangsiyan1 小时前
运维之前端反调试学习
运维·前端·学习·状态模式
Cicada1281 小时前
ccvt:一个用 Rust 写的中国地图坐标系互转命令行工具
开发语言·后端·rust
1001101_QIA1 小时前
工控机网络配置
开发语言·数据库·php
小徐_23332 小时前
TRAE WORK 实战,之前写一篇水文要半天,现在用 TRAE Work 摸鱼2分钟交差,真香!
前端·trae