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

相关推荐
进击的程序猿~7 分钟前
Go 并发底层原理面试学习指南
开发语言·面试·golang
牧艺8 分钟前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计
脚踏实地皮皮晨11 分钟前
002002002_DepandencyObject类2
开发语言·windows·算法·c#·visual studio
洪贺14 分钟前
从原始采样到可缩放心电图:用 h5ECG 绘制自己的 ECG
前端
冰心孤城24 分钟前
Excel: xls与xlsx格式转换排坑指南
java·前端·excel
程序员黑豆44 分钟前
鸿蒙应用开发之跨组件传参:@Provide 与 @Consume 跨层级数据同步详解
前端·harmonyos
练习时长一年44 分钟前
@SneakyThrows注解
开发语言
我的xiaodoujiao1 小时前
快速学习Python基础知识详细图文教程14--模块
开发语言·python·学习·测试工具
NoteStream1 小时前
【c语言基础】C语言常见概念
c语言·开发语言·编辑器
吃好睡好便好1 小时前
MATLAB中图像的线性变换
开发语言·图像处理·学习·计算机视觉·matlab