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

相关推荐
wulijuan88866612 分钟前
ECharts图表性能优化的那些事
前端·javascript·echarts
弦有三种苦难16 分钟前
CCF-202412-T3缓存模拟90分
java·开发语言·spring
❀͜͡傀儡师19 分钟前
通过npm 手动安装、Docker 部署 OpenClaw小龙虾
前端·docker·npm
会编程的土豆19 分钟前
【数据结构与算法】 二叉树做题
开发语言·数据结构·c++·算法
青槿吖22 分钟前
SpringMVC通关秘籍(下):日期转换器、拦截器与文件上传的奇幻冒险
java·开发语言·数据库·sql·mybatis·状态模式
wangjialelele22 分钟前
C++11、C++14、C++17、C++20新特性解析(一)
linux·c语言·开发语言·c++·c++20·visual studio
前端AI充电站23 分钟前
Google 开始卷价格了:Gemini 3.1 Flash-Lite,会不会把 AI 应用成本真的打下来?
前端·人工智能
weixin_4563216428 分钟前
Java架构设计:Redis AOF持久化深度解析(原理+实战+避坑)
java·开发语言·redis
风止何安啊29 分钟前
数字太长看花眼?一招教它排好队:千分位处理的实现
前端·javascript·面试