26、VUE中演示v-for为什么要加key

太过爱你忘了你带给我的痛 2021-06-24 16:12 388阅读 0赞

说到这个问题想必要举个例子了

![3973616-8f9fd484aa3544b1.jpg][]

**没有key**

<div id="app">
        <div>
          <input type="text" v-model="name">
          <button @click="add">添加</button>
        </div>
        <ul>
          <li v-for="(item, i) in list">
            <input type="checkbox"> {
        {item.name}}
          </li>
        </ul>
    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            name: '',
            newId: 3,
            list: [
              { id: 1, name: '李斯' },
              { id: 2, name: '吕不韦' },
              { id: 3, name: '嬴政' }
            ]
          },
          methods: {
            add() {
             //注意这里是unshift
              this.list.unshift({ id: ++this.newId, name: this.name })
              this.name = ''
            }
          }
        });
      </script>
      </div>

> 当选中吕不为时，添加楠楠后选中的确是李斯，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是吕不为

![3973616-ff6a298524fd39dc.jpg][]

![3973616-281b0c8ae857f17f.jpg][]

**有key**

<div id="app">
        <div>
          <input type="text" v-model="name">
          <button @click="add">添加</button>
        </div>
        <ul>
          <li v-for="(item, i) in list" :key="item.id">
            <input type="checkbox"> {
        {item.name}}
          </li>
        </ul>
    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            name: '',
            newId: 3,
            list: [
              { id: 1, name: '李斯' },
              { id: 2, name: '吕不韦' },
              { id: 3, name: '嬴政' }
            ]
          },
          methods: {
            add() {
             //注意这里是unshift
              this.list.unshift({ id: ++this.newId, name: this.name })
              this.name = ''
            }
          }
        });
      </script>
      </div>

> 同样当选中吕不为时，添加楠楠后依旧选中的是吕不为。

![3973616-c34bc534f49544a0.jpg][]

![3973616-ef133a0c7dff8d82.jpg][]

`可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果`

查过相关文档，图例说明很清晰。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设  
首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：

![3973616-cbe6ef9bad920f51.png][]

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。  
比如一下这个情况：

![3973616-6d930e85939f0a3e.jpg][]

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

![3973616-c93a83cb2203fa54.jpg][]

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

![3973616-25f6c171772b50b6.jpg][]

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

[3973616-8f9fd484aa3544b1.jpg]: /images/20210615/e636c15871b34ef2815536fbdf1a7da4.png
[3973616-ff6a298524fd39dc.jpg]: /images/20210615/b3e544b6c9094fa6b84967d0795e0b86.png
[3973616-281b0c8ae857f17f.jpg]: /images/20210615/bfe6f551738d4673804da9aece02dd14.png
[3973616-c34bc534f49544a0.jpg]: /images/20210615/65b927d277984d979df6928c3f6d4c5f.png
[3973616-ef133a0c7dff8d82.jpg]: /images/20210615/749ace3c09014535b3c984373aa48d80.png
[3973616-cbe6ef9bad920f51.png]: /images/20210615/6d957d699b6c4da897afd4cad928abcd.png
[3973616-6d930e85939f0a3e.jpg]: /images/20210615/efecd4153856407eaacc2c2350d28e0b.png
[3973616-c93a83cb2203fa54.jpg]: /images/20210615/969e3a937d904c7b9b454f0a716dccd6.png
[3973616-25f6c171772b50b6.jpg]: /images/20210615/39283673e83443edbaf1bc2aca2adf21.png