<transition>只能渲染第一个组件

<transition>标签在Vue.js中通常用于实现组件之间的过渡效果，它允许你在两个组件之间创建平滑的视觉转换。然而，当你只使用`v-if`或`v-show`指令来控制组件的显示隐藏，并且在一个生命周期内只会有一个组件处于可见状态时，`<transition>` 只会渲染并应用动画到第一次进入视图的那个组件上。后续的显示或隐藏变化不会触发新的过渡。

例如：

<template>
  <button @click="toggleComponent">切换组件</button>
  <transition name="fade">
    <component :is="activeComponent"></component>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      activeComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.activeComponent = this.activeComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
};
</script>

在这个例子中，只有当`activeComponent`首次从`ComponentA`变为`ComponentB`时，`fade`过渡才会生效。如果之后再次切换回`ComponentA`，则不会触发新的过渡。