内置组件

Vue 提供了一些内置组件，这些组件可以直接在模板中使用，无需导入。

Transition

<Transition> 组件为单个元素或组件提供动画过渡效果。

<Transition name="fade">
  <p v-if="show">Hello</p>
</Transition>

TransitionGroup

<TransitionGroup> 组件为列表中的多个元素或组件提供过渡效果。

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

KeepAlive

<KeepAlive> 组件可以缓存包裹的组件实例，避免重复创建和销毁。

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

包含/排除

<!-- 逗号分隔字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

最大缓存实例数

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Teleport

<Teleport> 组件可以将其插槽内容渲染到 DOM 中的其他位置。

<Teleport to="body">
  <div class="modal">
    <p>A modal</p>
  </div>
</Teleport>

禁用 Teleport

<Teleport :disabled="isMobile">
  <div class="modal">
    <p>A modal</p>
  </div>
</Teleport>

Suspense

<Suspense> 组件用于协调对组件树中嵌套的异步依赖的处理。

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 "正在加载中" -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

异步依赖

异步依赖可以是：

1. 带有异步 setup() 钩子的组件
2. 异步组件

<script setup>
// 异步 setup()
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  <div>{{ posts }}</div>
</template>

错误处理

<Suspense>
  <Dashboard />
  <template #fallback>
    Loading...
  </template>
</Suspense>

可以通过 onErrorCaptured 钩子来处理错误：

<script setup>
import { onErrorCaptured } from 'vue'

onErrorCaptured((err) => {
  console.log(err)
  return true // 阻止错误继续冒泡
})
</script>