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

相关推荐
阿捞25 分钟前
Inertia.js 持久布局实现原理
前端·javascript·html
不会写DN7 分钟前
如何在纯前端中通过手势交互来控制星球的转动
前端·交互
w2sfot7 分钟前
反AI逆向JS加密
javascript·人工智能·反ai
ZK_H20 分钟前
半导体工艺流程
java·c语言·开发语言·计算机网络·金融
计算机安禾26 分钟前
【数据结构与算法】第39篇:图论(三):最小生成树——Prim算法与Kruskal算法
开发语言·数据结构·c++·算法·排序算法·图论·visual studio code
liliangcsdn27 分钟前
sentence-transformer如何离线加载和使用模型
开发语言·前端·php
Crazy________27 分钟前
4.10dockerfile构建镜像
java·开发语言
fish_xk30 分钟前
c++内存管理
开发语言·c++·算法
独特的螺狮粉40 分钟前
城市空气质量简易指数查询卡片:鸿蒙Flutter框架 实现的空气质量查询应用
开发语言·flutter·华为·架构·harmonyos
网域小星球40 分钟前
C语言从0入门(八)|函数基础:封装、调用与参数传递精讲
c语言·开发语言