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

相关推荐
桌面运维家24 分钟前
VLAN配置进阶:抑制广播风暴,提升网络效率
开发语言·网络·php
天天向上10241 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
一轮弯弯的明月1 小时前
Python基础-速通秘籍(下)
开发语言·笔记·python·学习
西西学代码1 小时前
Flutter---回调函数
开发语言·javascript·flutter
大尚来也1 小时前
深入HashMap底层:从JDK1.7到1.8的架构演进与性能突围
开发语言
卷帘依旧1 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
柳杉2 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化
森林里的程序猿猿2 小时前
并发设计模式
java·开发语言·jvm
222you2 小时前
四个主要的函数式接口
java·开发语言
reembarkation3 小时前
vue3中使用howler播放音频列表
前端·vue.js·音视频