type
status
date
slug
summary
tags
category
icon
password
😀
在了解vue源码后，写mini-vue时,分享下对Vue3 diff算法的理解，下面是新旧节点标识ShapeFlags 皆为 ARRAY_CHILDREN的比较
 
 

Vue3 核心diff算法

相关变量解释

1.对比新旧元素两端

首先先对比新旧元素的头部进行对比,patch方法就是对元素节点的比较，若头部的key值相等就patch下去，遇到key不相等就不patch了

2.判断是否存在新元素⊆旧元素或者旧元素⊆新元素

若旧元素⊆新元素，则对新元素中新节点进行mount(挂载)操作（此处patch的第一个参数为null就是mount操作） 若新元素⊆旧元素，则对旧元素的旧节点进行unmount（删除）操作

3.采用vue2传统diff算法

若都不满足前面的，则采取传统的differ算法，只是不真的对其进行移动和添加，而是将其删除和标记起来，然后判断旧元素中是否存在新元素中的节点，对新节点进行mount操作，对旧节点进行移动和删除，如果需要对旧节点进行移动，则采用 获取最长递增子序列的方法来获取最佳移动方法（这个下篇文章分享下）
我有什么地方写的不明白和错误的地方，可以在评论区告诉我，那属实泰裤啦！
💡
有关diff算法的问题，欢迎您在底部评论区留言，一起交流~
编写一个markdown-it-navbar组件不一样的el-form校验