Vue

用key管理可服用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。用key则可以表达不要复用的元素。

例如：

<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>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉，仅仅是替换了它的 placeholder。

而使用key值后，输入框每次切换会重新渲染，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

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

v-if与v-show

都是满足条件时展示。

v-if是真正的渲染，条件不符时不渲染，直到为真时开始渲染。

v-show 不管是否符合都会渲染，只是通过css控制显隐性。

v-if有更高的切换开销，v-show有更高的初次渲染开销，需频繁切换时用v-show。