为何v-show需在组件外添加包裹元素？附Vue场景实例

我的项目展示四款可选益智游戏，通过调整puzzle的值可每次仅显示其中一款。初始代码使用v-if实现切换：

<script setup>
const puzzle = ref('puzzleIndex');
</script>

<template>
  <div id="box" class="box">
    <word-wheel   v-if="puzzle==='wordWheel'"  ></word-wheel>
    <train-tracks v-if="puzzle==='trainTracks'"></train-tracks>
    <combi-word   v-if="puzzle==='combiWord'"  ></combi-word>
    <square-away  v-if="puzzle==='squareAway'" ></square-away>
  </div> 
</template>

由于v-if会销毁组件，导致切换回半完成的游戏需重新开始，因此希望改用v-show。但直接替换v-if为v-show后，所有游戏会同时显示，必须为每个组件添加外层div并将v-show绑定到该div上才能正常工作：

<div id="box" class="box">
  <div v-show="puzzle==='wordWheel'" >
    <word-wheel ></word-wheel>
  </div>
  <div v-show="puzzle==='trainTracks'">
    <train-tracks ></train-tracks>
  </div>
  <div v-show="puzzle==='combiWord'" >
    <combi-word ></combi-word>
  </div>
  <div v-show="puzzle==='squareAway'">
    <square-away></square-away>
  </div>
</div>

请问为何v-show需要在组件外添加包裹元素才能实现预期的单组件展示效果？

核心原因在于自定义组件的根结构或内部样式逻辑，导致直接绑定v-show无法完全隐藏组件：

• v-show的工作逻辑：它是通过给目标元素添加display: none行内样式实现隐藏，本质是操作单个DOM元素的样式。如果直接把v-show绑定到自定义组件，Vue会尝试将样式应用到组件的根元素上。
• 组件根结构问题：如果你的游戏组件（比如word-wheel）根节点是多个元素（比如同时包含<div>和<canvas>），Vue无法确定把display: none应用到哪一个，最终只会隐藏部分元素，组件整体依然可见。
• 内部样式冲突：部分组件可能在内部设置了高优先级的display样式（比如加了!important），会覆盖v-show添加的行内样式，导致隐藏失效。

给每个组件套一层独立的<div>后，v-show的display: none会直接作用在这个包裹块上，不管组件内部结构如何，整个包裹区域都会被隐藏，自然就能实现单组件展示的效果。

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