用在元素切换中
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username" />
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email" />
</template>
Vue为了高效地渲染元素，默认会复用已有元素而不是重新渲染。在上面的代码中，如果没有为input元素设置key,在切换loginType之后，Vue会使用原来的input元素，而其中的内容也不会清空。为了使切换loginType之后input元素的内容清空，需要为input标签添加key，使切换过后用新的input元素进行渲染且清空内容。
用在过渡中
<transition name="slide">
<div v-if="showHello" key="hello">hello</div>
<div v-else key="world">world</div>
</transition>
在上面的代码中，showHello变量控制了两个div标签的显示，如果不为两个div标签添加key，Vue为了效率，会使用同一个元素，只替换其中的内容，由于没有元素的插入与移除，所以没有过渡效果。添加了key相对于为两个元素添加唯一标示，Vue就不会复用元素了，showHello变量就能控制两个元素的插入与移除，过渡效果才能显示出来。
用在列表中
Vue更新用v-for渲染的元素列表时，由于无法将之前渲染的元素和新的数据项对应，默认采用"就地更新"策略。如果数据的顺序改变，Vue不会移动Dom元素来匹配数据的顺序，而是更新每个Dom元素的内容，确保渲染内容和在数据中所在的位置一致。为元素列表的每一项添加key，就为每个元素添加了唯一标示，列表数据更新顺序时，会根据key找到已渲染的元素进行复用，对顺序不匹配的元素进行位置的调整，由于是Dom操作，就不会存在临时状态不对应的问题了，同时也更为高效。
总结：
- 使同类型元素切换时不进行元素的复用
- 使列表重新渲染时复用已有的元素，提高效率
