vue sfc 的 必须是顶层单标签，内部有且仅有一个根元素；支持插值、指令和组件调用；逻辑和样式须分别置于 和 中； 可作无渲染包装器用于 v-for/v-if 等场景。
Vue 单文件组件（SFC）中，<template></template> 必须是顶层标签之一，且只能有一个，它包裹整个组件的 HTML 结构，且内部必须有且仅有一个根元素。
根元素不可省略，也不能并列多个
Vue 不允许 <template></template> 内直接写多个同级标签（如两个 <div> 并列），否则会报错“Component template requires a root element”。必须用一个容器包裹，例如：
<ul>
<li><code><div>...</div>
<section>...</section><template>...</template>（仅用于逻辑分组，不渲染，需配合 v-if/v-for 等指令）模板内支持完整的 Vue 模板语法
你可以在 <template></template> 中自由使用插值、指令和组件调用，比如：
-
{{ message }}显示响应式数据 -
<button>点我</button>绑定事件 -
<mybutton :text="btnLabel"></mybutton>引入并使用其他组件（需先注册或全局引入）
不能在 <template></template> 外写 HTML 或 JS 逻辑
<template></template> 只负责视图结构，所有逻辑必须放在 <script></script> 中，所有样式必须放在 <style></style> 中。以下写法是错误的：
- 在
<template></template>外直接写<div>xxx</div> - 在
<template></template>里写const x = 1或function foo(){} - 把
export default {...}放在<template></template>标签内部
可选：使用 <template></template> 作为无渲染包装器
当不需要真实 DOM 容器时（比如列表循环或条件分支），可用语义化的 <template></template> 标签替代根元素，它本身不会被渲染，只起语法占位作用：
{{ item.name }}
{{ item.desc }}
