v-key的作用

akino ... 2021-10-22 Vue
  • Vue
大约 2 分钟

无论开发小程序还是Vue应用,都经常会使用到列表渲染,在使用过程中,如果不绑定 key 值,ide经常警告需要绑定 key 值。但是一直都没有去深究为什么需要绑定一个 key 值,现在终于有时间了,所以去关注一下这些底层的东西。

# 举个栗子

<head>
  <title>v-key</title>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="username">
      <button @click="addUser">添加用户</button>
    </div>
    <div v-for="user in users">  //:key="user.id"
      <input type="checkbox">{{user.username}}
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      curId: 3,
      username: '',
      users: [
        {
          id: 1,
          username: '小红'
        },
        {
          id: 2,
          username: '小明'
        },
        {
          id: 3,
          username: '小天'
        }
      ]
    },
    methods: {
      addUser() {
        this.users.unshift({
          id: ++this.curId,
          username: this.username
        });
        this.username = '';
      }
    },
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

不绑定 key 的情况,从数组头部添加元素时,checkbox选中的永远是第二条数据。

当将 key 绑定为user的id时,checkbox选中的元素即可不受新增元素影响。

# 怎么如此?🤔

这就要从Vue的diff算法说起了,算了,不扯这么远(菜狗

先上图,下面是没有 key 和有 key的比较过程。

这是未绑定 key 时的比较过程:

这是绑定 key 时的比较过程:

通过上面两幅图可以看出,当绑定 key 之后,节点更新时,节点的比较只会和 key 相同的节点进行对比,从而节省的DOM操作的开销,除了避免例子里面的情况,同时还会提高渲染效率。

然后绑定key时建议是选择静态不变的唯一值,不要绑定数组的索引,我以前就是一知半解,一直绑定的是数组的索引...

最后,算是把这个 key 值给搞明白了!