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

相关推荐
SRC_BLUE_173 分钟前
VulnHub | Breach - 1
开发语言·php·dreamweaver
胡桃夹夹子5 分钟前
【前端优化】vue2 webpack4项目升级webpack5,大大提升运行速度
前端·javascript·vue.js·webpack·性能优化
橘子海全栈攻城狮8 分钟前
【源码+文档+调试讲解】党员之家服务系统小程序1
java·开发语言·spring boot·后端·小程序·旅游
Stringzhua10 分钟前
JavaScript【7】BOM模型
开发语言·前端·javascript
wefg116 分钟前
【C++】类与对象
开发语言·c++
DT——18 分钟前
ECMAScript 2018(ES2018):异步编程与正则表达式的深度进化
开发语言·javascript·ecmascript
Kakikori18 分钟前
JSP链接MySQL8.0(Eclipse+Tomcat9.0+MySQL8.0)
java·开发语言
阿幸软件杂货间26 分钟前
谷歌浏览器(Google Chrome)136.0.7103.93便携增强版|Win中文|安装教程
前端·chrome
双叶83632 分钟前
(C语言)超市管理系统 (正式版)(指针)(数据结构)(清屏操作)(文件读写)(网页版预告)(html)(js)(json)
c语言·javascript·数据结构·html·json
子豪-中国机器人42 分钟前
C++ 蓝桥 STEMA 省选拔赛模拟测试题(第一套)
开发语言·c++·算法