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

相关推荐
火车叼位6 分钟前
告别表单“黄油色”:如何优雅地重置 Chrome 自动填充样式
前端
不会写DN7 分钟前
golang的fs除了定权限还能干什么?
开发语言·爬虫·golang
Dragon Wu8 分钟前
Taro Webpack 5 编译过慢的解决方案
前端·webpack·小程序·taro
共享家952720 分钟前
C++ string 类从原理到实战
开发语言·c++
认真学GIS20 分钟前
日尺度地下水水位!全国11897个地下水动态监测站点2005-2021年日尺度地下水水位(地下水埋深)(EXCEL格式)数据
服务器·前端·excel
_DoubleL21 分钟前
Volta启动项目自动切换Node版本
前端·node.js
库奇噜啦呼24 分钟前
【iOS】Effective Objective-C第一章
开发语言·ios·objective-c
阿里巴巴终端技术28 分钟前
[第 20 届 D2 倒计时] 7 大专场演讲、44 个精彩话题、D2 之夜畅聊 AI + 终端的发展前景
前端·人工智能·程序员
进击的雷神32 分钟前
前端路由动态渲染、JSON内嵌HTML清洗、展位信息数组化、分页参数固定化——尼日利亚展会爬虫四大技术难关攻克纪实
前端·爬虫·python·json
不会写DN36 分钟前
Go 语言并发编程的 “工具箱”
开发语言·后端·golang