缘起
如果有代码
<transition
mode="out-in"
>
<div
v-show="true"
:key="game"
class="tab-body-item"
/>
</transition>
在game值变化后,元素div.tab-body-item将会从vnode树中消失。
原理
在transition中实际上有两种过渡模式,一种通过子节点销毁新建。对于v-show是提供了特殊的内置支持,把切换display属性推迟到过渡执行结束后。见leave
同时使用会产生冲突,是vue2的bug(但是自己没定位到)