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 分钟前
lectrue9 索引并发控制
java·开发语言·数据库
2401_8321319516 分钟前
模板错误消息优化
开发语言·c++·算法
进阶小白猿19 分钟前
Java技术八股学习Day30
java·开发语言·学习
lead520lyq20 分钟前
Golang本地内存缓存
开发语言·缓存·golang
zhaotiannuo_199821 分钟前
Python之2.7.9-3.9.1-3.14.2共存
开发语言·python
2601_9498683631 分钟前
Flutter for OpenHarmony 电子合同签署App实战 - 主入口实现
开发语言·javascript·flutter
m0_7482299933 分钟前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
helloworldandy1 小时前
高性能图像处理库
开发语言·c++·算法
2401_836563181 小时前
C++中的枚举类高级用法
开发语言·c++·算法
C澒1 小时前
前端监控系统的最佳实践
前端·安全·运维开发