博客探讨了在Vue中使用v-for循环时，为何key不建议设置为index。文章指出，key作为DOM节点的唯一标识，当列表动态插入新元素时，使用index可能导致不必要的大量DOM更新，增加内存消耗。尽管渲染结果可能正确，但如果有输入框等交互元素，可能会导致显示错误。因此，建议避免在代码中使用key=index。
在之前的项目中，因为自己的学艺不精，一直没有注意这个问题，也为了图方便，key一直等于循环的index，但是并没有出现问题（虽然只是表面上没有）
后面知道了这个点了解以后，恍然大悟
下面我们聊聊为啥key不推荐用index吧
首先我们要知道vue虚拟dom的使用的算法是diff算法，就是原地比较复用，然key是每个节点的唯一标识，就好比名字一般，独一无二（打比方，我当然知道世界上面有很多重名的，嘿嘿）
现在假如你有一个列表，这里你使用v-for了，但是你使用key=index，渲染在页面中，后你想插入一个新元素进去，然后你插入方式是顺次插入，你没有发现问题
（ 这个数字代表你key的index值，字母代表内容，因为我要暂时错误，所以不使用id）
这里虚拟更新完，虚拟dom会去比较新旧dom之间的差异，如果旧的没有变化就不更新复用，新出的来就更新上去，这里明显更新4 D，然后现在我们不顺次更新，我们倒过来，插入在上面
下面就是dom展示
插入以后，因为你key等于index，所以第一个肯定一直为1呗，但是上次1的内容是a，这边更新以后变成了插入的D，a的key变成了2，现在，按照原有diff算法更新，我们还能像上面一样只更新一个dom节点吗？
显然不能，这里一比较，之前的1-a变成了2-a ,2-b变成了3-b,明显全部都变了，这里就要全部都更新，这样对内存进行了一个浪费与消耗，白白更新了一堆垃圾！！
说到这里，虽然对内存是有所消耗，但是并不是不能用，至少渲染结果是对的，但是如果你的dom中带有像输入框之内的盒子，就连渲染结果都是错的，他们会错位
所以key=index还是不要再出现在各位的代码中了吧
扫一扫
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
