v-if加key值的作用 | XiaoChen's Blog

我知道v-for要加key，增加渲染效率，却没想到v-if也要加key

# 背景

v-if、else控制两个input框的显隐，点击按钮切换input框，当输入框内输入了字符后，点击按钮切换，输入框内字符不清空。

// 以下是源代码
 <div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名...">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱...">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        type: 'name'
      },
      methods: {
        handleToggleClick() {
          this.type = this.type === 'name' ? 'mail' : 'name';
        }
      }
    });
  <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

# 分析

vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染，比如上面的实例，在，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明input元素被复用了，如果不希望这样做，可以使用vue提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的！！！，例如下面这样：

<div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名..." key="neme-input">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱..." key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        type: 'name'
      },
      methods: {
        handleToggleClick() {
          this.type = this.type === 'name' ? 'mail' : 'name';
        }
      }
    });
  </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

vue中列表循环需要加:key='唯一标识'，唯一标识尽量是id，目的是为了高效地更新虚拟DOM。
key主要用于dom diff算法，diff算法为同级比较，比较当前标签上的key还有他当前的标签名，如果key和标签名都一样时只移动，不会重新创建元素和删除元素没有key地时候默认使用就地复用策略。如果数据的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。
尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。

diff算法图解：

diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比

在这里插入图片描述