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

相关推荐
亿元程序员15 分钟前
做了十年游戏,我才意识到:程序员最该投资的,是一台专业的编程显示器
前端
CoderYanger28 分钟前
优选算法-字符串:63.二进制求和
java·开发语言·算法·leetcode·职场和发展·1024程序员节
3***312129 分钟前
java进阶1——JVM
java·开发语言·jvm
charlie11451419135 分钟前
深入理解C/C++的编译链接技术6——A2:动态库设计基础之ABI设计接口
c语言·开发语言·c++·学习·动态库·函数
IT_陈寒37 分钟前
Python高手都在用的5个隐藏技巧,让你的代码效率提升50%
前端·人工智能·后端
Cx330❀38 分钟前
C++ STL set 完全指南:从基础用法到实战技巧
开发语言·数据结构·c++·算法·leetcode·面试
white-persist41 分钟前
【攻防世界】reverse | Reversing-x64Elf-100 详细题解 WP
c语言·开发语言·网络·python·学习·安全·php
FeiHuo5651541 分钟前
微信个人号开发中如何高效实现API二次开发
java·开发语言·python·微信
zmzb010343 分钟前
C++课后习题训练记录Day33
开发语言·c++
csbysj20201 小时前
Bootstrap 折叠
开发语言