key
的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for
:
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 完整地触发组件的生命周期钩子
- 触发过渡
例如:
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text
发生改变时,<span>
会随时被更新,因此会触发过渡。
作者:方应杭
链接:https://www.zhihu.com/question/61064119/answer/766607894
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
假设你有三个子组件,每个子组件里面有一个「有状态的」孙子组件。
现在用户点击删除按钮,把第二个子组件删掉了,请问结果是怎样的?
你可能会说,那还用问?当然是 2 消失了。因为 data 里的数组从 [1,2,3] 变成了 [1,3]。
实际上你没有考虑全面:注意看图中的绿色正方形没有被删除。
不信的话点击这个代码,按照我的指示操作一下:
首先,在三个 input 里依次输入三角形、正方形和圆形。
然后,点击中间的 delete 按钮,你会看到结果变成了:
令人疑惑的在于原来的第三项「圆形」消失了!「正方形」却被保留下来了!
原因
原因很简单,你认为你删除了2,但Vue会认为你做了两件事:
- 把2变成了3
- 然后把3删除了
Vue 为什么要舍近求远呢?
看看这两个数组:[1,2,3] 和 [1,3]
人类会说,这不就是少了个 2 吗?
但是计算机会怎么对比数组?遍历!
首先对比 1 和 1,发现「1 没变」;然后对比 2 和 3,发现「2 变成了 3」;最后对比 undefined 和 3,发现「3 被删除了」。
所以计算机的结论是:「2 变成了 3」以及「3 被删除了」,有毛病吗?没毛病。
- 既然「1 没变」,那么就地复用之前的 1 就好了。
- 既然「2 变成了 3」,那么正方形左边的 2,当然要改成 3。里面的孙子元素就地复用(正方形被保留)。有人不理解为什么这里的正方形被保留,那么你可能需要结合代码看看。因为正方形三个字是孙子元素的 data,不受「2 变成 3」的影响。
- 既然「3 被删除了」,之前的「圆形」当然应该被删掉,里面的子元素也要删除。
所以现在看这个结果,是不是很合理:
破解方法
怎么解决这个问题呢?怎么让 Vue 知道我删除的是第二个,不是第三个?
用 id 作为 key 就行了。不信你再看:
现在删除第二个:
你可能会问,凭什么加 key 就 ok 了!点击代码试试吧。
Vue Template - CodeSandboxcodesandbox.io
同样的操作再来一遍
首先,在三个 input 内输入三角形、正方形、圆形:
然后删除中间的正方形:
很好,没有bug。
我们以计算机的角度来思考一下:
原本的数组是 [{ id: 1, value: 1 }, { id: 2, value: 2 }, { id: 3, value: 3 }]
点击删除之后的数组是 [{ id: 1, value: 1 }, { id: 3, value: 3 }]
然后对比一下:(注意我没有说这里是 diff 算法,我也不打算在这里讲 diff 算法)
- 首先发现 id 从 1 2 3 变成了 1 3,说明第二项被删除了
- 然后依次对此 id: 1 的项和 id: 3 的项,发现没变化。
所以计算机得出结论:第二项被删除了。符合人类预期!
为什么不能用 index 作为 key
如果你用 index 作为 key,那么在删除第二项的时候,index 就会从 1 2 3 变成 1 2(而不是 1 3),那么 Vue 依然会认为你删除的是第三项。也就是会遇到上面一样的 bug。
所以,永远不要用 index 作为 key。