面试题：Vue 的 template 标签有什么用？

在 Vue 中，<template> 标签是一个特殊的标签，用于包裹模板内容，但它不会被渲染为实际的 DOM 元素。它的主要作用是作为占位符或容器，用于组织和复用代码。

1. `<template>` 标签的作用

（1）包裹多个元素

在 Vue 中，组件的模板必须有一个根元素。如果需要渲染多个元素，可以使用 <template> 包裹它们，而不会引入额外的 DOM 节点。

<template>
  <div>第一个元素</div>
  <div>第二个元素</div>
</template>

（2）条件渲染

<template> 可以与 v-if、v-else-if、v-else 等指令一起使用，用于条件渲染一组元素。

<template v-if="isVisible">
  <div>内容 1</div>
  <div>内容 2</div>
</template>
<template v-else>
  <div>其他内容</div>
</template>

（3）循环渲染

<template> 可以与 v-for 指令一起使用，用于循环渲染一组元素。

<template v-for="item in items" :key="item.id">
  <div>{{ item.name }}</div>
</template>

（4）插槽（Slot）

<template> 可以用于定义插槽内容，尤其是在具名插槽和作用域插槽中。

<!-- 子组件 -->
<slot name="header"></slot>

<!-- 父组件 -->
<template v-slot:header>
  <h1>自定义头部</h1>
</template>

（5）动态组件

<template> 可以与 <component> 标签一起使用，用于动态渲染组件。

<template>
  <component :is="currentComponent"></component>
</template>

2. `<template>` 标签的特点

不会渲染为 DOM 元素：<template> 标签本身不会被渲染为实际的 DOM 元素，它只是一个占位符。
支持 Vue 指令：可以在 <template> 上使用 Vue 的所有指令（如 v-if、v-for 等）。
支持插槽：<template> 是定义插槽内容的常用方式。
提高代码可读性：通过 <template> 组织代码，可以使模板更加清晰和易读。

3. `<template>` 的使用场景

（1）条件渲染

<template v-if="isLoggedIn">
  <div>欢迎回来！</div>
</template>
<template v-else>
  <div>请登录</div>
</template>

（2）循环渲染

<template v-for="user in users" :key="user.id">
  <div>{{ user.name }}</div>
</template>

（3）插槽

<!-- 子组件 -->
<slot name="content"></slot>

<!-- 父组件 -->
<template v-slot:content>
  <div>这是插槽内容</div>
</template>

（4）动态组件

<template>
  <component :is="currentComponent"></component>
</template>

（5）复用模板片段

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

4. `<template>` 与 `<div>` 的区别

特性	`<template>`	`<div>`
是否渲染为 DOM	不会渲染为 DOM 元素	会渲染为 DOM 元素
是否支持指令	支持 Vue 指令	支持 Vue 指令
是否支持插槽	支持插槽	支持插槽
是否影响布局	不影响布局	可能影响布局
适用场景	条件渲染、循环渲染、插槽、动态组件等	需要实际 DOM 元素的场景