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 分钟前
AI IDE试用(一)
javascript·ide
chao1898442 分钟前
基于MATLAB实现多变量高斯过程回归(GPR)
开发语言·matlab·回归
jump_jump2 小时前
基于 Squoosh WASM 的浏览器端图片转换库
前端·javascript·性能优化
ytttr8735 小时前
隐马尔可夫模型(HMM)MATLAB实现范例
开发语言·算法·matlab
天远Date Lab5 小时前
Python实战:对接天远数据手机号码归属地API,实现精准用户分群与本地化运营
大数据·开发语言·python
listhi5205 小时前
基于Gabor纹理特征与K-means聚类的图像分割(Matlab实现)
开发语言·matlab
小二·5 小时前
前端监控体系完全指南:从错误捕获到用户行为分析(Vue 3 + Sentry + Web Vitals)
前端·vue.js·sentry
qq_433776426 小时前
【无标题】
开发语言·php
Davina_yu7 小时前
Windows 下升级 R 语言至最新版
开发语言·windows·r语言
阿珊和她的猫7 小时前
IIFE:JavaScript 中的立即调用函数表达式
开发语言·javascript·状态模式