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

相关推荐
ShiXZ2136 分钟前
指令集-NPM 常用指令速查手册
前端·npm·node.js
朱永博11 分钟前
使用Onnruntime实现Padim/Patchcore推理
开发语言·c#
এ慕ོ冬℘゜11 分钟前
前端核心知识体系进阶:从安全机制、网络协议到原生 JS 实战全解析
前端·网络协议·安全
前端H13 分钟前
Biome & Rolldown:Rust 工具链接管前端基建
开发语言·前端·rust
柒和远方15 分钟前
从等待到流式:LLM 流式输出的原理、协议与工程实践
javascript·llm
forever_world22 分钟前
# 💧 从前端视角,彻底搞懂 AI 流式输出 —— 从"接根水管"到 Vue 3 实战
前端·vue.js
天天进步201522 分钟前
UI-TARS 源码解析 #4:UI-TARS 与传统 RPA 的区别:为什么它不是简单的坐标点击脚本?
开发语言
运维行者_27 分钟前
广域网性能监控:分布式IT架构下的链路质量保障
开发语言·网络·分布式·后端·架构·数据库架构
梅雅达编程笔记28 分钟前
零基础学 Python 第7章 | 字典 dict:键值对存储
开发语言·python·beautifulsoup·numpy·pandas
灯澜忆梦33 分钟前
GO---map函数
开发语言·前端·后端·golang