Vue中遇到input复用

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" :key="username">  <!--:key的作用是防止input复用-->
  </span>
  <span v-else="isUser">
    <label for="email">邮箱账号</label>
    <!--<input type="text" id="email" placeholder="用户邮箱" :key="email">-->    <!--情况1：:key="email"可以防止input复用-->
    <input type="text" id="email" placeholder="用户邮箱" :key="username">        <!--情况2：:key="username" 不可以防止input复用-->
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      isUser : true,
    }
  })
</script>

代码演示：

用户账号中输入qaq然后点击切换类型。

解释：
因为代码中没有防止input复用，所以会出现点击切换类型后，邮箱账号中还会出现qaq。可以通过改变:key中的值使二者不一样来防止input复用。

关于复用：
html在解析的时候会产生虚拟dom和真实dom。
虚拟dom渲染到真实dom中，互斥流只会显示一份并且只会保存其中的一份在虚拟dom中。
当需要改变真实dom中的互斥的div时，div在界面被删除，这时虚拟dom会重新渲染 之前保存的那份互斥流 到真实dom中，并且会进行比较，把不一样的数据进行替换。