Nuxt3 组件缓存实践

为什么需要组件缓存

• 减少不必要的组件重渲染：某些组件的内容不需要频繁更新，比如页面右侧的推荐列表、广告栏等。通过缓存，可以避免它们随着路由切换重新渲染。

• 提高页面响应速度：当页面缓存后，用户切换页面时，无需等待每个组件重新加载，提升了页面的流畅性。

• 降低服务器请求次数：一些组件的数据可能是从服务器获取的，缓存组件后，可以减少服务器的请求次数，节省带宽。

Vue 中的组件缓存

使用场景

• 动态路由页面：如文章详情页，文章的具体内容随着路由变化而更新，但右侧的推荐列表、广告位等可以保持不变。

• 表单页面：在路由切换时希望保留表单输入的数据，以防止用户在返回时丢失已填写内容。

使用方式

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <router-view />
</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>

Nuxt 中的组件缓存

全局页面缓存

export default defineNuxtConfig({
  app: {
    keepalive: true,
  },
})

<NuxtPage> 页面缓存

• name：指定 RouterView 使用与匹配到的路由记录中的 components 选项相对应的组件名进行渲染。
• 类型：string

• route：包含所有已解析组件的路由位置。
• 类型：RouteLocationNormalized

• pageKey：用于控制 NuxtPage 组件何时重新渲染。可以通过路由参数或其他条件生成动态 key，从而控制缓存。
• 类型：string 或 function

• transition：为使用 NuxtPage 渲染的所有页面定义全局的过渡效果。可以设置布尔值控制是否启用过渡，或者传入过渡属性对象自定义过渡行为。
• 类型：boolean 或 TransitionProps

• keepalive：控制 NuxtPage 渲染的页面是否保留组件状态。与 Vue 的 <keep-alive> 类似，可以避免页面重新渲染时丢失组件状态。
• 类型：boolean 或 KeepAliveProps

提示：Nuxt 会自动解析 name 和 route，通过扫描和渲染 pages 目录下的所有 Vue 组件文件。

1. 静态 key 示例
如果传递一个静态的 key，则 NuxtPage 组件在首次挂载时渲染一次，不会根据路由变化而重新渲染。例如：

<!-- app.vue -->
<template>
  <NuxtPage page-key="static" />
</template>

在这个例子中，NuxtPage 组件被赋予了一个静态的 pageKey，组件只会在第一次挂载时渲染。

2. 动态路由 key 示例
你也可以根据当前的路由动态生成 key，从而控制组件的重新渲染。例如：

<!-- app.vue -->
<template>
  <NuxtPage :page-key="route => route.fullPath" />
</template>

这里的 pageKey 是根据当前路由的 fullPath 动态生成的，因此每当路由变化时，NuxtPage 组件会根据不同的 key 重新渲染。

注意：不要在此处使用 $route 对象，因为这可能会与 <Suspense> 渲染页面的方式产生冲突。

definePageMeta 页面缓存

<!-- pages/my-page.vue -->
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath
})
</script>

结语