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

相关推荐
指尖跳动的光15 分钟前
Vue的nextTick()方法
前端·javascript·vue.js
码事漫谈34 分钟前
可能,AI早都觉醒了
前端
kylezhao201939 分钟前
C#读取字节数组某个位的值
开发语言·c#
资生算法程序员_畅想家_剑魔1 小时前
Java常见技术分享-26-事务安全-锁机制-作用与分类
java·开发语言·数据库
qq_406176141 小时前
JS 事件循环(Event Loop)
开发语言·前端·javascript
Codebee1 小时前
ooder A2UI ES6版本正式发布:现代化模块架构,MIT开源许可
前端
Devin_chen1 小时前
4.前端使用Node + MongoDB + Langchain消息管理与聊天历史存储
前端·langchain
前端er小芳1 小时前
前端文件 / 图片核心 API 全解析:File、FileReader、Blob、Base64、URL
前端
twl1 小时前
探索Agent RAG: 一文讲清楚从理论到具体落地
前端
FinClip1 小时前
赢千元好礼!FinClip Chatkit “1小时AI集成挑战赛”,邀你来战!
前端