Vue2和Vue3中v-for的key使用，有何具体差异？

Vue2和Vue3中v-for的key使用，有何具体差异？

哎，说起Vue的v-for这可是个老生常谈的家伙。不管是Vue 2还是Vue 3，它都挺重要的。但要说key的使用，那可就有点儿不一样了你懂的。咱就来好好唠唠嗑，彻底捋清楚这其中的猫腻，最后强调一点。。

为什么需要key？

咳咳，先别急着跳坑。咱先得明白key到底是什么玩意儿？简单它就像给每个循环渲染出来的元素打了个“身份证”。有了这个“身份证”，Vue就能精准地记住谁是谁， 我明白了。 知道哪个应该被移动、销毁，哪个应该被复用。这可不是为了速度快，而是为了准！别小看这“准”字儿啊，没准儿就会给你带来大麻烦。

Vue 2：比较随和的老朋友

在Vue 2里v-for的优先级挺高的。也就是说 如果你把v-for和v-if放在同一个元素上，Vue会先跑完循环再判断有没有满足条件的元素。这个写法挺常见的嘛，话说回来.….。

不过呢，有个小缺点咱得提一下：千万别用索引当key！除非你的列表是死的、不会增删改的。不然的话啊…你到时候会遇到各种奇奇怪怪的问题的。比如你想过滤一个列表后来啊呢？如果用了索引当key, Vue可能会把整个列表重新遍历一遍才去隐藏那些不符合条件的元素…简直是浪费性能！所以啊…咱还是用数据里的唯一ID吧，事实上...！

Vue 3：规矩多了点

到了Vue 3, 这就热闹了！ v-if 的优先级比 v-for 高了！是不是很神奇？这意味着什么呢？如果 v-if 的条件为假了那么循环根本就不会施行！想想就觉得舒服多了嘛，勇敢一点...。

我不敢苟同... 更重要的是… Vue 3对 key 的类型检查更严格了！官方明确说了：尽量别用对象或者数组当 key! 主要原因是它们的引用地址不稳定啊！这样一来呢… 你就很容易遇到问题了。