vue2.0 组件复用 数据没有更新

如果开发过程中出现使用v-if-else来切换组件时发现数据没有更新，那么就是因为元素被复用具体可以参考 https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素

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

查看input元素发现只有input的placeholder的变化了 元素本身就没有改变，而且输入的值也没有被清除；原因是vue为了尽快的渲染页面所以通常会复用已经渲染的元素，所以会导致绑定的数据并没被实时刷新；
解决办法就是：对复用的元素添加 key

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

这样就避免了数据没有刷新的问题