Vue3中如何在v-if/v-else分支复用同一组件实例？

你当前的写法会导致Vue在切换分支时销毁前一个<CompA>实例，再创建新的——因为v-if/v-else本质是条件性地添加/移除DOM元素及对应组件实例。要复用单个<CompA>实例，可通过以下方案实现：

方案1：使用Teleport动态挂载（推荐，保留原有DOM结构） #

将单个<CompA>实例放在分支外部，通过Teleport根据条件将其挂载到对应的分支容器中。这样组件只会初始化一次，切换条件时仅改变它在DOM中的位置，不会销毁重建。

示例代码：

<!-- 定义两个分支容器 -->
<div v-if="xyz" ref="containerA"></div>
<div v-else ref="containerB"></div>

<!-- 单个CompA实例，动态切换挂载目标 -->
<Teleport :to="xyz ? $refs.containerA : $refs.containerB">
  <CompA />
</Teleport>

方案2：调整DOM结构，单独控制CompA显示 #

如果业务场景允许<CompA>不嵌套在分支容器内，可将其单独渲染，仅切换分支内容的显示状态：

<CompA />

<div v-if="xyz">分支A的专属内容</div>
<div v-else>分支B的专属内容</div>

这种方式下<CompA>始终存在于DOM中，不会被销毁重建，完全复用单个实例。

内容的提问来源于stack exchange，提问作者user1012525