通过 100+ 技巧合集学习 Nuxt!

Nuxt 生命周期

理解 Nuxt 应用的生命周期可以帮助您更深入地了解框架的运作方式,尤其是在服务端和客户端渲染方面。

本章的目标是提供框架不同部分、它们的执行顺序以及它们如何协同工作的高级概述。

服务器

在服务器端,对于应用程序的每个初始请求,都会执行以下步骤

步骤 1:设置 Nitro 服务器和 Nitro 插件(一次)

Nuxt 由现代服务器引擎 Nitro 驱动。

当 Nitro 启动时,它会初始化并执行 `/server/plugins` 目录下的插件。这些插件可以

  • 捕获和处理应用程序范围内的错误。
  • 注册在 Nitro 关闭时执行的钩子。
  • 注册用于请求生命周期事件的钩子,例如修改响应。
Nitro 插件仅在服务器启动时执行一次。在无服务器环境中,服务器会在每个传入请求时启动,Nitro 插件也是如此。但是,它们不会被等待。
阅读更多内容请参考 文档 > 指南 > 目录结构 > 服务器#服务器插件。

步骤 2:Nitro 服务器中间件

在初始化 Nitro 服务器之后,`/server/middleware/` 下的中间件会为每个请求执行。中间件可以用于诸如身份验证、日志记录或请求转换等任务。

从中间件返回值将终止请求并将返回的值作为响应发送。通常应避免此行为,以确保正确的请求处理!
阅读更多内容请参考 文档 > 指南 > 目录结构 > 服务器#服务器中间件。

步骤 3:初始化 Nuxt 并执行 Nuxt 应用插件

首先创建 Vue 和 Nuxt 实例。之后,Nuxt 执行其服务器插件。这包括

  • 内置插件,例如 Vue Router 和 unhead。
  • 位于 `/plugins/` 目录中的自定义插件,包括没有后缀的插件(例如 `myPlugin.ts`)和带有 `.server` 后缀的插件(例如 `myServerPlugin.server.ts`)。

插件以特定顺序执行,并且可能彼此依赖。有关更多详细信息,包括执行顺序和并行性,请参阅 插件文档。

在此步骤之后,Nuxt 调用 `app:created` 钩子,该钩子可用于执行额外的逻辑。
阅读更多内容请参考 文档 > 指南 > 目录结构 > 插件。

步骤 4:路由验证

在初始化插件之后和执行中间件之前,如果 `definePageMeta` 函数中定义了 `validate` 方法,Nuxt 会调用它。`validate` 方法可以是同步的或异步的,通常用于验证动态路由参数。

  • `validate` 函数应在参数有效时返回 `true`。
  • 如果验证失败,它应该返回 `false` 或一个包含 `statusCode` 和/或 `statusMessage` 的对象以终止请求。

有关更多信息,请参阅 路由验证文档。

阅读更多内容请参考 文档 > 入门 > 路由#路由验证。

步骤 5:执行 Nuxt 应用中间件

中间件允许您在导航到特定路由之前运行代码。它通常用于诸如身份验证、重定向或日志记录等任务。

在 Nuxt 中,有三种类型的中间件

  • 全局路由中间件
  • 命名路由中间件
  • 匿名(或内联)路由中间件

Nuxt 会在首次进入应用程序时以及每次路由导航之前自动执行全局中间件。命名和匿名中间件仅在相应页面组件中定义的页面(路由)meta 的 middleware 属性中指定的路由上执行。

有关每种类型的详细信息和示例,请参阅 中间件文档。

服务器上的任何重定向都将导致 `Location:` 标头被发送到浏览器;然后浏览器向这个新位置发出新的请求。除非状态保存在 cookie 中,否则当这种情况发生时,所有应用程序状态都将被重置。

阅读更多内容请参考 文档 > 指南 > 目录结构 > 中间件。

步骤 6:设置页面和组件

Nuxt 在此步骤中初始化页面及其组件,并使用 `useFetch` 和 `useAsyncData` 获取任何所需的数据。由于服务器上没有动态更新且没有 DOM 操作发生,因此在 SSR 期间 **不会** 执行 Vue 生命周期钩子,例如 `onBeforeMount`、`onMounted` 和后续的钩子。

您应该避免在 `