用key值管理可复用的元素？

首先我们了解一下vue中渲染dom的原理：

        vue在进行渲染的时候，它会优先选择已经存在的dom节点，因为这样可以大大地提高渲染速度，但是这样也有一个弊端。例如如下这个例子

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

当你在输入框输入内容的时候，切换label标签，他会一直存在，但事实上我们想要的是，当我切换到另一个标签的时候，input这个标签会刷新。

针对这个问题，给出了key，来表示各个标签的一种身份，区别来各个标签的不同。便可以解决这个问题了。