为什么不能使用v-show：

<template> 在运行时会被完全剥离

为什么 <template> 在运行时会被完全剥离？

简答：<template> 不是一个真正的 HTML 元素，它只是一个“包装器”或“占位符”。它的唯一作用是在编写模板时，将一组元素逻辑地组织在一起，而不会在最终渲染的 DOM 中产生任何多余的、无意义的标签。**

• 在编译时（构建阶段）： Vue 的编译器会处理你的 .vue 文件。当它遇到 <template> 标签时，它会提取其内部的所有内容，但会丢弃 <template> 标签本身。
• 在运行时： 最终生成的渲染函数和虚拟 DOM 中，<template> 标签已经消失了。它的子节点会被直接挂载到其父级节点之下。

---

<template> 的作用是什么？

<template> 标签在 Vue 中主要有以下几个重要作用：

1. 分组多个根级元素（解决单根限制）： 在 Vue 2 中，每个组件模板必须有且仅有一个根元素。<template> 是这个规则的唯一例外，因为它本身不会被渲染。在 Vue 3 中，虽然支持了多根节点组件，但 <template> 依然是组织代码结构的好方法。

2. 与条件渲染 v-if / v-else-if / v-else 和列表渲染 v-for 配合使用： 当你需要根据条件渲染一组元素，或者循环渲染一组元素时，用 <template> 来包裹它们是最佳实践。

   <!-- 条件渲染一组元素 -->
   <template v-if="status === 'loading'">
     <p>加载中...</p>
     <Spinner />
   </template>
   
   <!-- 列表渲染一组元素 -->
   <ul>
     <template v-for="item in items" :key="item.id">
       <li>{{ item.name }}</li>
       <li class="divider"></li>
     </template>
   </ul>

3. 与 v-slot 配合使用，定义插槽模板： 在作用域插槽中，<template> 用于定义要插入到插槽中的内容结构。

   <MyComponent>
     <template v-slot:header="{ user }">
       <h1>Hello, {{ user.name }}</h1>
     </template>
   </MyComponent>

---

回到 v-show 的问题

现在，我们把所有知识点串联起来：

• v-show 的原理： 它通过切换目标元素的 CSS display: none 属性来实现显隐。这意味着它必须作用于一个真实存在的 DOM 元素。
• <template> 的本质： 它在运行时不存在于 DOM 中，只是一个逻辑包装器。

**因此，矛盾就产生了，**当你写 <template v-show="isVisible">...</template> 时，Vue 的编译器会尝试为这个 v-show 指令找到一个 DOM 节点来绑定。但是，这个指令所在的 <template> 标签在编译后就被丢弃了，Vue 找不到一个对应的真实节点来应用 display: none 样式。

Vue 无处下刀。

解决方案是

1. 使用 v-if on <template>（推荐）：v-if 是“条件性的渲染”，当条件为 false 时，它根本就不会创建这组元素的 DOM 节点。这与 <template> 的特性完美契合。

   <template v-if="isVisible">
     <p>这些内容要么全部出现，要么全部不出现。</p>
     <p>不会有多余的包装div。</p>
   </template>

2. 使用一个真实元素（如 div）包裹，并对其使用 v-show： 如果你确实需要用到 v-show 的特性（频繁切换、初始渲染成本高），那么你必须用一个真实的元素来包裹它们。

   <div v-show="isVisible">
     <p>这些内容会通过CSS display属性来切换。</p>
     <p>但代价是DOM中会多一个始终存在的div。</p>
   </div>