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

相关推荐
『 时光荏苒 』几秒前
网页变成PDF下载到本地
前端·javascript·pdf·网页下载成
亿元程序员7 分钟前
逃离鸭科夫5人2周1个亿,我们可以做一个鸡科夫吗?
前端
国服第二切图仔19 分钟前
Rust开发实战之简单游戏开发(piston游戏引擎)
开发语言·rust·游戏引擎
ii_best26 分钟前
安卓/IOS工具开发基础教程:按键精灵一个简单的文字识别游戏验证
android·开发语言·游戏·ios·编辑器
十一.36626 分钟前
37-38 for循环
前端·javascript·html
波诺波26 分钟前
环境管理器
linux·前端·python
草莓熊Lotso29 分钟前
C++ 继承特殊场景解析:友元、静态成员与菱形继承的底层逻辑
服务器·开发语言·c++·人工智能·经验分享·笔记·1024程序员节
诗句藏于尽头32 分钟前
电脑使用软件控制本机屏和外接屏失效问题及解决
开发语言
San30.38 分钟前
深入理解浏览器渲染流程:从HTML/CSS到像素的奇妙旅程
前端·css·html
不是株39 分钟前
JavaWeb(后端进阶)
java·开发语言·后端