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

相关推荐
天空'之城8 分钟前
Linux 系统编程 10:线程同步
linux·开发语言·系统编程·线程同步
Vect__11 分钟前
Go 数据结构 slice 深度剖析
开发语言·数据结构·golang
想你依然心痛13 分钟前
AtomCode在Python数据科学项目中的使用体验:从数据分析到可视化
开发语言·python·数据分析
满天星830357715 分钟前
【Qt】控件(二) (geometry及与frameGeometry的区别)
开发语言·qt
想你依然心痛26 分钟前
AtomCode 在前端开发中的实战体验:React + TypeScript 项目开发实录
前端·react.js·typescript
疯狂的魔鬼30 分钟前
精确计算容器剩余视口高度:useAutoContainerFullHeight 的工程实践
前端·css·typescript
Esaka_Forever35 分钟前
Python 与 JS (V8) 垃圾回收核心区别 + 底层根源分析
开发语言·javascript·jvm
用户0595401744637 分钟前
用了 3 个月 ChatGPT,才发现它一直在遗忘——用 Playwright 自动化验证记忆存储一致性
前端·css
玄玄子38 分钟前
xss前端解决方案
前端·浏览器·xss
林希_Rachel_傻希希40 分钟前
web性能优化之——AI总结视频
前端·javascript·面试