Vue.js 为什么vshow需要组件的包装元素

我的项目展示了四种不同的益智游戏.通过调整值puzzle，我可以显示它们中的每一个；一次只显示一个.

<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-show代替v-if(最后给出了理由).如果我把v-if码S换成v-show码S，all the puzzles are displayed at the same time码.所以我不得不在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-if中，每一次益智try 在关闭时都会被销毁，如果你切换回它，必须重新开始.