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

相关推荐
Goodbaibaibai几秒前
接口请求了两次,一次报200,一次报404
前端
汉堡go1 分钟前
python_chapter3
开发语言·python
游戏23人生1 分钟前
c++ 语言教程——16面向对象设计模式(五)
开发语言·c++·设计模式
Alsn862 分钟前
30.登录用户名密码 RSA 加密传输-后端为java
java·开发语言
qq_463408423 分钟前
React Native跨平台技术在开源鸿蒙中使用WebView来加载鸿蒙应用的网页版或通过一个WebView桥接本地代码与鸿蒙应用
javascript·算法·react native·react.js·开源·list·harmonyos
老王熬夜敲代码3 分钟前
C++的decltype
开发语言·c++·笔记
全马必破三4 分钟前
React虚拟Dom
前端·javascript·react.js
tmj014 分钟前
前端JavaScript(浏览器)与后端JavaScript(Node.js)
javascript·node.js
FAQEW5 分钟前
若依微服务版(RuoYi-Cloud)本地启动全攻略
前端·后端·微服务·若依·二开
lxp1997416 分钟前
PHP框架自带队列--更新中
开发语言·php