v-for中的key

2021-11-23

为什么不能使用index/随机数来左key

问题: v-for.vue组件中有一段列表,和一个按钮,点击按钮,列表反转,分别index作为key和使用id作为key

使用index作为key

// v-for.vue
<template>
  <div>
    <h1>为什么不能使用index/随机数来左key</h1>
    <ul>
      <li v-for="(item, index) in students" :key="index">{{ item.name }}</li>
    </ul>
    <button @click="reverse">反转</button>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup() {
    const students = reactive([
      { name: '小明', age: 12, id: 'aa' },
      { name: '小红', age: 13, id: 'bb' },
      { name: '小白', age: 14, id: 'cc' },
    ]);
    const reverse = () => {
      students.reverse()
    };
    return {
      students,
      reverse,
    };
  },
};
</script>

我们知道 template模板里的内容最终使会被编译成vNode的

ul:的vNode模型:

{
    tag: 'ul',
        children: [
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小明'}
                    }
                ]
            },
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小红'}
                    }
                ]
            },
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小白'}
                    }
                ]
            }
        ]
}

此时使用的使index作为key, 当点击按钮的使用,使数组反转,就会创建行的vNode:

{
    tag: 'ul',
        children: [
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小白'}
                    }
                ]
            },
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小红'}
                    }
                ]
            },
            {
                tag: 'li',
                children: [
                    {
                        vnode: {text: '小明'}
                    }
                ]
            }
        ]
}

按理说:vnode经过diff算法之后应该发现第一个和第三个vnode使完全一样的,可以复用,但是由于我们使用的key是index, 再diff算法中有一段关于key的函数

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      )
    )
  )
}

它是用来判断节点是否可用的关键函数，可以看到，判断是否是 sameVnode，传递给节点的 key 是关键。

由于反转后第一三的vNode的key发生了变化,所以diff算法不会认为这两个vNode可以复用,就会重新创建vnode等一系列重要的钩子函数和视图的渲染等操作

可以发现第一个和第三个vnode会重新渲染,而不是复用

试想:如果有一个100个li 那么都重新渲染性能会急剧下降

所以不应该使用index/随机数来作为key,而是使用唯一的id作为key

1
2
3

<ul>
     <li v-for="(item, index) in students" :key="item.id">{{ item.name }}</li>
</ul>