Vue自己在背后做了很多你不知道的事
- Vue会尽可能高效的渲染元素，通常会服用已有元素而不是从头渲染；
- 这么做除了使得vue变得非常快之外，还有其他的好处；
- 例如，你允许用户在不同的登录方式之间切换；
不同的登录方式切换
- 用户名登录；
- 邮箱登录；
<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。
- 假如username里面，已经输入了内容：wangyan666；
- 当切换到Email时，输入框里面的内容还是wangyan666没变，只是label和placeholder变了；
但是我们平时不需要这种功能，防止他复用，给他加一个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>
现在，每次切换时，输入框都将被重新渲染。
