最近在用vue开发项目过程中,发现个奇怪的现象,用v-if控制几个组件的显隐时,几个不同实例的组件(假设v-if中都用到comp-test组件)数据都穿了,混了,仔细研究下了代码看到代码也没啥问题,思考了好久无果,想了想这个地方用v-show也是可以的,是不是用v-show也会出现相同问题,结果发现v-show是好用的,干脆就用v-show把问题绕过去了,最近暂时不用赶项目工期,就研究了下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>
这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key
attribute 即可:
<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>
现在,每次切换时,输入框都将被重新渲染。请看:
注意,<label>
元素仍然会被高效地复用,因为它们没有添加 key
attribute。