template标签为什么不可以使用v-show？

前言

写 Vue 时，最容易踩的小坑之一，就是给 <template> 套一个 v-show。编辑器不报错，页面却"消失"了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒：<template> 不是真节点，它只是个"草稿纸"。

一、为什么 <template> 拒绝 v-show

v-show 的本质是切换元素的 CSS：display: none。浏览器要找到真实 DOM 节点，才能给它加样式。而 <template> 在运行时会被完全剥离，不会留下任何标签，Vue 找不到节点，也就无处下刀。

举个反面教材：

<!-- ❌ 无效示例 -->
<template v-show="false">
  <p>我永远被渲染</p>
</template>

打开控制台，你会看到 <p> 还是生成了，但 v-show 的指令像从没来过。

二、官方的正确姿势

1. 想按条件渲染一块区域，用 v-if：

<!-- ✅ 有效示例 -->
<template v-if="show">
  <p>只在 show 为 true 时出现</p>
</template>

2. 想按条件展示一个真实节点，用 v-show：

<!-- ✅ 有效示例 -->
<p v-show="show">我只是在隐藏/显示</p>

三、实战演练：弹窗小组件

需求：点击按钮，弹窗淡入淡出。

思路：弹窗需要保留 DOM（方便动画），所以外层用 div 套 v-show，内部用 <template> 组织结构。

<template>
  <button @click="visible = !visible">切换弹窗</button>

  <!-- 真实节点，可以 v-show -->
  <transition name="fade">
    <div v-show="visible" class="modal">
      <!-- 内部用 template 纯粹排版 -->
      <template>
        <h3>温馨提示</h3>
        <p>内容区域</p>
        <button @click="visible=false">关闭</button>
      </template>
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
</style>

四、总结

<template> 只是编译时的"占位符"，别让它承担运行时样式切换的重任；该渲染就交给 v-if，该显隐就交给真实节点加 v-show。记住这句口诀，能少踩 80% 的坑。