Vue元素复用问题

Vue元素复用的问题

1. 首先看一个小例子

当我们需要实现点击切换登录的功能时，类似于下面：
用v-if和v-else简单实现：

<div id="app">
	<span v-if="isUser">
		<label for="user">账号登录label>
		<input type="text" id="user" placeholder="请输入账号" key="user" />
	span>
	<span v-else>
		<label for="email">邮箱登录label>
		<input type="text" id="email" placeholder="请输入邮箱" key="email" />
	span>
	<button type="button" @click="isUser = !isUser">切换登录button>
div>

let app = new Vue({
     
	el: "#app",
	data: {
     
		isUser: true
	}
});

2. 这里有个小问题：

• 如果在有输入的情况下，切换登录方式，会发现输入框中的文本依然会保留
  

• 按道理这里的输入框已经切换到另外一个输入框了

• 而在另一个输入框中我们没有输入任何内容

• 为什么文本会被保留呢？

3. 问题解释：

• 这是因为Vue在进行渲染的时候，出于对性能的考虑，会尽可能的复用已经存在的元素，而不是创建新的元素
• 所以在切换登录方式的时候，并不是直接再创建一个input，而是在原有的input基础上修改它的属性，label也是如此

4. 解决方案：

• 如果不希望出现类似的问题，可以再为input标签添加key属性
• 并且保证key属性的不同

此时问题解决。