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

相关推荐
hyf3266334 分钟前
泛程序哪有想象中难!小白跟着走一遍就全懂
前端·爬虫·搜索引擎·seo·蜘蛛池
米码收割机5 分钟前
【Python】Django 电子设备商城系统(源码+说明文档)[独一无二]
开发语言·python·django
互联网中的一颗神经元10 分钟前
小白python入门 - 38. 动态内容:接口优先与自动化扫盲
开发语言·python·自动化
码农学院16 分钟前
React公众号开发:母婴用品会员积分体系技术方案
前端·react.js·前端框架
黑客-秋凌34 分钟前
使用Python+selenium实现第一个自动化测试脚本
开发语言·自动化测试·软件测试·python·selenium·测试工具
路光.44 分钟前
Vue2升级Vue3处理原 UMD/CommonJS 打包文件,不是标准 ESM
前端·javascript·vue.js·vue3
黄华SJ520it1 小时前
门店预约系统开发:提升服务行业数字化转型
前端·数据库·系统开发
geovindu1 小时前
CSharp: Iterative Algorithms
开发语言·后端·算法·c#·.net·迭代算法
一只月月鸟呀1 小时前
移动端tap与click的区别 && 点透事件
开发语言·前端·javascript
雨落在了我的手上1 小时前
Java数据结构(六):链表的介绍
java·开发语言·数据结构