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

相关推荐
小菜同学爱学习1 分钟前
夯实基础!MySQL数据类型进阶、约束详解与报错排查
开发语言·数据库·sql·mysql
90程序员11 分钟前
纯浏览器解析 APK 信息,不用服务器 | 开源了一个小工具
前端·apk
源码站~12 分钟前
基于机器学习的社交媒体舆情分析系统
开发语言·python
用户114818678948415 分钟前
Vosk-Browser 实现浏览器离线语音转文字
前端·javascript
江上清风山间明月19 分钟前
Vite现代化的前端构建工具详解
前端·webpack·nodejs·vite
PBitW21 分钟前
apijson 让前端自己定义接口 —— 但不推荐
前端·apijson
存在X21 分钟前
前端自动化编译Jenkins
前端·github
jieyucx22 分钟前
Go 语言零基础入门:编写第一个 Hello World 程序
开发语言·后端·golang
军军君0126 分钟前
数字孪生监控大屏实战模板:云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
沐知全栈开发26 分钟前
Rust 数据类型
开发语言