vue key解决了引入相同组件切换时数据互不影响
文档细节遗忘导致的问题（面试官：这是基础）
日常开发中，遇到一个问题，相同组件引入后，切换发现组件内的数据没有更新/重置
1
2
3
4
5
6
|
<code-same v-if="code==1"/>
<code-same v-if="code==2"/>
import codeSame from "./components/code.vue";
<input type="text" />
|
思考1
是不是受到了keep-alive影响缓存，然而场景下并没有用动态组件，而是v-if
尝试了4种情况
components引入不同实例组件时正常，而只实例化一次的组件就会缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div>
<!-- 正常 -->
<code1 v-if="code==1"/>
<code2 v-if="code==2"/>
</div>
<div>
<!-- 缓存 -->
<code-same v-if="code==1" :key="c1"/>
<code-same v-if="code==2" :key="c2"/>
</div>
<div>
<!-- 缓存 -->
<code-same v-if="code==`${code}`" :key="xxx"/>
</div>
<div>
<!-- 正常 -->
<code-same v-if="code==1" ref="c1" />
<code-same2 v-if="code==2" ref="c2" />
</div>
import code1 from "./components/code1.vue";
import code2 from "./components/code2.vue";
import codeSame from "./components/code.vue";
import codeSame2 from "./components/code.vue";
|
思考2
即时父组件上用了key也不生效
等等
既然试了父组件的key，也试试子组件的key呗
1
| <input :key="`c${dnumber}`" type="text" />
|
这次成功了，上面2种缓存的情况回复了正常，切换时输入框不再有值
v-if + components时为什么需要加key呢，那就前往官方文档看看~
用key管理可复用的元素
(Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可)
（震惊了，我感觉我没看过文档，尤小右牛皮!）
