vue 中key的作用

vue 虚拟dom在渲染时为了提高更新效率，不会全局刷新所有元素，而是捕捉记录需要修改的节点进行渲染。

key的作用就是标识每个不同的元素防止元素没有被重新渲染。

示例：

<template>
  <div>
    <template v-if="binded">
      <label>Username</label>
      <input placeholder="请输入Username">
    </template>

    <template v-else>
      <label>Email</label>
      <input placeholder="请输入Email">
    </template>
    <button @click="binded=!binded">切换</button>
  </div>
</template>

<script>
export default {
  name: 'key',
  data () {
    return {
      binded: true
    }
  }
}
</script>

运行结果：

点击切换后：

可以看到label和input都刷新了，是这样吗？

我们在input中输入数值，查看对比：

点击切换：

我们可以看到在username中输入的数值依旧存在，事实上input并没有被刷新，被刷新的是placeholder属性。

显然我们需要的不是这种效果。我们要刷新整个input，只要对他增加key元素，为它做唯一性标识，下次vue去渲染时就能认出这两个元素了。

<div>
    <template v-if="binded">
      <label>Username</label>
      <input placeholder="请输入Username" key="user">
    </template>

    <template v-else>
      <label>Email</label>
      <input placeholder="请输入Email" key="email">
    </template>
    <button @click="binded=!binded">切换</button>
  </div>