小探vue2中为什么使用transition过渡元素时,元素不能show和key同时存在

由 漆黑菌 于 2023年12月01日 发布

缘起

如果有代码

<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(但是自己没定位到)

代码位置

extractPropsFromVNodeData