v-if 組件未銷毀

今天開發遇到一個問題，我復用了兩個高度相似的組件，在用 v-if 配合開關進行展示的時候，發現組件並未被成功銷毀：

解決方法：給兩個組件添加不同的  :key="" 

 

出現問題的代碼：

<!-- List2 -->
<List v-if="whichList===2" :whichList="2"></List>

<!-- List1 -->
<List v-if="whichList===1" :whichList="1"></List>

解決后：

<!-- List2 -->
<List v-if="whichList===2" :whichList="2" :key="2"></List>

<!-- List1 -->
<List v-if="whichList===1" :whichList="1" :key="1"></List>