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

相关推荐
陕西企来客12 小时前
2026 西安 GEO 优化技术解析:前沿技术与行业规范深度企来客科技行业白皮书声明
开发语言·搜索引擎·php
AI科技星12 小时前
基于光速螺旋第一性原理:$G,\varepsilon_0,\alpha$引电统一完整推导+严谨证明+高精度数值全维度分析
c语言·开发语言·网络·量子计算·agi
木斯佳12 小时前
前端八股文面经大全:腾讯音乐-前端一面(2026-05-27)·面经深度解析
前端
糖果店的幽灵12 小时前
Claude Code 完全实战指南 - 第四章:Skill 怎么写
java·服务器·前端
light blue bird12 小时前
MES/ERP 工序 BOM 协同场景调度维护组件
前端·信息可视化·桌面端winform·多节点端·gdi图表绘制开发
鱼人13 小时前
Vue 3 组合式 API 最佳实践:如何写出可维护的代码
前端
wuhen_n13 小时前
LangChain 自定义 Tool 封装:打造专属 AI 能力工具集
前端·langchain·ai编程
长大198813 小时前
彻底搞懂 JavaScript 事件循环
前端
橘猫走江湖13 小时前
Web 前端本地存储:localStorage 与 IndexedDB
前端·javascript·indexeddb
小强198813 小时前
CSS 布局进化史:从 Float 到 Flexbox 再到 Grid
前端