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

相关推荐
开航母的李大4 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
sjtu_cjs6 分钟前
Tensorrt python api 10.11.0笔记
开发语言·笔记·python
哆啦A梦的口袋呀11 分钟前
深入理解系统:UML类图
开发语言·python·uml
虎冯河26 分钟前
怎么让Comfyui导出的图像不包含工作流信息,
开发语言·python
鱼樱前端31 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想41 分钟前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao44 分钟前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js