本文主要是介绍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相同的时候,就进入比较;
这篇关于vue3 diff源码梳理学习笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!