Vue3的template陷阱,一个没写指令的 <template>把按钮吞了

会显示出[立即开通]按钮吗？

<template>
  <div>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="Top Left prompts info"
      placement="top-start"
    >
      <template>
        <el-button v-if="[100,200].includes(status)">立即开通</el-button>
      </template>
    </el-tooltip>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const status = ref(100);
</script>

会显示出[立即开通]按钮吗？
思考5秒后，
有的小伙伴会说：可以显示出来，有的小伙伴会说：不能显示出来。
其实，不能显示出来的。

不能显示出来的原因

在 Vue 3 里，
<template> 只有带了指令（v-if /v-else/v-else-if/v-for/v-slot ）才会被编译器消掉；
没有任何指令的<template> 会被渲染成原生 HTML<template> 元素。
而原生 template 的内容是惰性的（放进content 文档片段，不显示在页面上）。
所以，[立即开通]按钮不会显示出来。
特别说明：消掉是指：编译后不产生任何 DOM 节点

HTML中是否有原生template元素?

有的。
HTML 中确实原生的 <template> 元素。
它是一个标准的、被现代浏览器广泛支持的 HTML 元素。
专门用于存放不立即渲染的 HTML 代码片段

原生template元素的核心特征

1，不渲染：template 的内容是惰性的，（放进content 文档片段，不显示在页面上）
2，无副作用：其中的脚本不会执行，图片不会加载，音视频也不会播放

没有任何指令的template会被渲染成原生template元素

证明：
没有任何指令的<template> 会被渲染成原生 HTML<template> 元素。
而原生 template 的内容是惰性的（放进里面的文档片段，不显示在页面上）。

<template>
  <div>
    <div>
      <h1>没有任何指令的 `template` 会被渲染成原生template标签</h1>
      <template>
        <el-button>立即开通</el-button>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const status = ref(100);
</script>

el-tooltip下面没有唯一的子节点会在控制台打一条警告

el-tooltip 会因为没有唯一子节点在控制台打一条ElOnlyChild 警告

<template>
  <div>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="Top Left prompts info"
      placement="top-start"
    >
      <template v-if="false">
        <el-button >立即开通</el-button>
      </template>
    </el-tooltip>
  </div>
</template>