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

相关推荐
passerby60619 分钟前
如何自己造一个时间处理库
前端·javascript·github
泡海椒28 分钟前
内置SPI函数库详解:JQuick-Java Builtin工具类实战用法
java·开发语言·python
hqyjzsb37 分钟前
零 AI 项目经验,学 Python 转型 AI 的正确顺序是什么?
开发语言·人工智能·python·算法·职场和发展·数据挖掘·数据分析
走到天涯海角1 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!1 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
Keven_111 小时前
算法札记:ACM适用的很骚的C++语法(持续更新)
开发语言·c++
北岛贰2 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
脉动数据行情12 小时前
C# 实现德指 DAX 期货 WebSocket 实时行情监听
开发语言·websocket·c#
大圣编蚕2 小时前
Java ByteArrayInputStream 详解:从入门到实战
java·开发语言·算法
菜鸟~noob2333 小时前
【电子战】第02篇:能量检测器 vs. 相关检测器【含matlab代码】
开发语言·matlab