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

相关推荐
xieliyu.4 小时前
Java算法精讲:双指针(二)
java·开发语言·算法
云水一下4 小时前
TypeScript 从零基础到精通(五):高级类型与泛型
前端·javascript·typescript
何以解忧,唯有..4 小时前
Python包管理工具pip:从入门到精通
开发语言·python·pip
counterxing4 小时前
vibe coding 之后,我更不想打字了
前端·agent·ai编程
雪的季节4 小时前
RabbitMQ详解
开发语言
云水一下5 小时前
TypeScript 从零基础到精通(六):类型声明与模块化
javascript·typescript
copyer_xyf5 小时前
Python 模块与包的导入导出
前端·后端·python
研☆香5 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6
微扬嘴角5 小时前
React篇1--JSX语法规则、组件、组件实例的3大特性
前端·react.js·前端框架
ice8130331815 小时前
【Python】Matplotlib折线图绘制
开发语言·python·matplotlib