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

相关推荐
城管不管36 分钟前
嵌入模型Embedding Model
java·开发语言·python·embedding·嵌入模型
Rust研习社44 分钟前
Rust Pin 解析:核心原理与异步编程实践
开发语言·后端·rust
Drone_xjw1 小时前
解决 Qt 程序在 Kylin(麒麟)系统下表头“白屏”的问题
开发语言·qt·kylin
运维行者_1 小时前
通过OpManager的Windows服务监控能力释放最佳IT网络性能
服务器·开发语言·网络·windows·web安全·php
.千余1 小时前
【Linux】进程概念
linux·服务器·开发语言·学习
索木木1 小时前
ShortCut MoE模型分析
前端·html
码界筑梦坊1 小时前
94-基于Python的商品物流数据可视化分析系统
开发语言·python·mysql·信息可视化·数据分析·毕业设计·fastapi
MXN_小南学前端1 小时前
Vue3 + Spring Boot 工单系统实战:用户反馈和客服处理的完整闭环(提供gitHub仓库地址)
前端·javascript·spring boot·后端·开源·github
轮子大叔1 小时前
CSS基础入门
前端·css
踩着两条虫1 小时前
强强联合!VTJ.PRO 正式接入 DeepSeek V4,AI 编码能力再跃升
前端·vue.js·ai编程