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

相关推荐
树在风中摇曳5 分钟前
【牛客排序题详解】归并排序 & 快速排序深度解析(含 C 语言完整实现)
c语言·开发语言·算法
小禾青青5 分钟前
我用uniapp开发app用到的uniapp插件
前端·vue.js·uni-app
小白每天学一点5 分钟前
微信小程序开发学习-8
javascript·css·微信小程序·小程序·html
柳一航15 分钟前
HTML笔记
前端·笔记·html
Vic1010123 分钟前
Java 序列化与反序列化:深入解析与实践
java·开发语言
Sirius Wu32 分钟前
开源训练框架:MS-SWIFT详解
开发语言·人工智能·语言模型·开源·aigc·swift
后端小张34 分钟前
【JAVA 进阶】Spring Cloud 微服务全栈实践:从认知到落地
java·开发语言·spring boot·spring·spring cloud·微服务·原理
艾小码37 分钟前
为什么你的Vue组件总出bug?可能是少了这份测试指南
前端·vue.js·debug
从零开始学习人工智能37 分钟前
USDT区块链转账 vs SWIFT跨境转账:技术逻辑与场景博弈的深度拆解
开发语言·ssh·swift
IT_陈寒37 分钟前
Redis 性能提升30%的7个关键优化策略,90%开发者都忽略了第3点!
前端·人工智能·后端