v-for 要用 key
v-for 要用 key 的原因可详见 vue 原理中的 diff 算法
其核心要领在于，diff 算法中通过 tag 和 key 来判断是否是同一个节点，使用 key 能减少渲染次数，提升渲染性能。
key 不能使用 random 随机数
因为随机数每次渲染时都会变化，按 diff 算法的比较规则，因 key 值的不同，就会视为节点发生了变化，而引发所有 v-for 节点的再次渲染。
key 不能使用 index
key 使用 index 或 无 key 时，在某些场景中会引发 diff 算法 的误判，导致页面错误的渲染。
比如包含输入框时，若 key 使用 index
左侧的内容重新排序了，但右侧输入框内容并没有同步变化。
完整演示代码如下：
<template> <div style="margin: 30px"> <button @click="sort">重新排序</button> <div v-for="(item, index) in list" :key="index"> {{ item }} <input type="input" placeholder="请输入" /> </div> </div> </template> <script> export default { data() { return { list: [1, 3, 2, 4], }; }, methods: { sort() { this.list.sort(); }, }, }; </script>
修正方案：将 key 改为 item
<template> <div style="margin: 30px"> <button @click="sort">重新排序</button> <div v-for="item in list" :key="item"> {{ item }} <input type="input" placeholder="请输入" /> </div> </div> </template> <script> export default { data() { return { list: [1, 3, 2, 4], }; }, methods: { sort() { this.list.sort(); }, }, }; </script>
达到预期效果！
