经典vue难点----v-for中的key和diff算法

最新推荐文章于 2023-04-21 21:46:30 发布

长安有故里，安河桥有你

最新推荐文章于 2023-04-21 21:46:30 发布

阅读量631

点赞数

文章标签：算法 vue.js javascript

本文链接：https://blog.csdn.net/weixin_43611484/article/details/120660651

版权

今天学习了v-for中的key和diff算法之间的关系，了解了vue是如何高效的渲染DOM。

在这里插入图片描述

在[a,b,c,d]中插入f，有三种方法：
- 数组变了，重新v-for循环
- a,b不变，c变f ,d变c,然后新增一个d
- a,b,c,d都不变，直接新增一个f
显然第三种方法是最高效的
Vue事实上会对于有key和没有key会调用两个不同的方法
- 有key，那么就使用 patchKeyedChildren方法
- 没有key，那么久使用 patchUnkeyedChildren方法

在这里插入图片描述

在这里插入图片描述

没有key的操作会分为三步
1. 先获取新旧节点的长度并且去最小长度
2. 遍历长度小的节点，对新旧节点依次patch（容易理解点就是对比节点类型和内容）
3. 判断新旧长度，若旧的短，则新增节点，反之删除节点

在这里插入图片描述

从尾部开始进行遍历、比较
如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点
如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点
最特色的情况，中间还有很多未知的或者乱序的节点

在这个当中，vue的做法是尽可能的复用重复出现的节点，把旧的当中没有在新的里出现的节点移除，把出现在新的节点中而旧的节点中没有的新增

注：看到这里在返回读一下官方对v-for中key值的作用的解释，是不是就恍然大悟了！！！

关注