v4 (4.0.0)
Nuxt on GitHub

Nuxt 生命周期

了解 Nuxt 应用程序的生命周期有助于深入理解该框架的运行机制，特别是在服务器端和客户端渲染方面。

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

服务器端

在服务器上，应用程序的每个初始请求都会执行以下步骤：

步骤 1：设置 Nitro 服务器和 Nitro 插件（一次）

Nuxt 由 Nitro（一个现代服务器引擎）提供支持。

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

  • 捕获和处理应用程序级错误。
  • 注册 Nitro 关闭时执行的钩子。
  • 注册请求生命周期事件的钩子，如修改响应。
Nitro 插件在服务器启动时只执行一次。在无服务器环境中，服务器会在每个传入请求时启动，Nitro 插件也会执行。但是，它们不会被等待。
阅读更多 Docs > Guide > Directory Structure > Server#server Plugins.

步骤 2：Nitro 服务器中间件

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

从中间件返回值将终止请求，并将返回的值作为响应发送。通常应避免这种行为，以确保正确处理请求！
阅读更多 Docs > Guide > Directory Structure > Server#server Middleware.

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

首先创建 Vue 和 Nuxt 实例。然后，Nuxt 执行其服务器插件，包括：

  • 内置插件，如 Vue Router 和 unhead。
  • 位于 plugins/ 目录中的自定义插件，包括无后缀的插件（如 myPlugin.ts）和带 .server 后缀的插件（如 myServerPlugin.server.ts）。

插件按特定顺序执行，可能相互依赖。有关执行顺序和并行性的更多详细信息，请参阅 插件文档。

此步骤之后，Nuxt 调用 app:created 钩子，可用于执行额外的逻辑。
阅读更多 Docs > Guide > Directory Structure > Plugins.

步骤 4：路由验证

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

  • 如果参数有效，validate 函数应返回 true。
  • 如果验证失败，应返回 false 或包含 statusCode 和/或 statusMessage 的对象以终止请求。

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

阅读更多 Docs > Getting Started > Routing#route Validation.

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

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

在 Nuxt 中，有三种类型的中间件：

  • 全局路由中间件
  • 命名路由中间件
  • 匿名（或内联）路由中间件

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

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

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

阅读更多 Docs > Guide > Directory Structure > Middleware.

步骤 6：渲染页面和组件

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

默认情况下，Vue 在 SSR 期间暂停依赖跟踪以提高性能。

服务器端没有响应式，因为 Vue SSR 以静态 HTML 自上而下地渲染应用程序，无法返回并修改已渲染的内容。
应避免在 <script setup> 的根作用域中编写需要清理副作用的代码。此类副作用的一个示例是使用 setInterval 设置计时器。在仅客户端的代码中，我们可以设置计时器，然后在 onBeforeUnmount 或 onUnmounted 中拆除它。但是，由于卸载钩子在 SSR 期间永远不会被调用，计时器将永远存在。为避免这种情况，请将副作用代码移至 onMounted 中。
观看 Daniel Roe 解释服务器渲染和全局状态的视频。

步骤 7：生成 HTML 输出

获取所有所需数据并渲染组件后，Nuxt 将渲染的组件与 unhead 的设置相结合，生成完整的 HTML 文档。然后将此 HTML 及其关联数据发送回客户端，完成 SSR 过程。

将 Vue 应用程序渲染为 HTML 后，Nuxt 调用 app:rendered 钩子。
在最终确定并发送 HTML 之前，Nitro 将调用 render:html 钩子。此钩子允许操作生成的 HTML，如注入额外的脚本或修改元标签。

客户端（浏览器）

无论选择哪种 Nuxt 模式，生命周期的这一部分都完全在浏览器中执行。

步骤 1：初始化 Nuxt 并执行 Nuxt 应用插件

此步骤类似于服务器端执行，包括内置和自定义插件。

plugins/ 目录中的自定义插件，如无后缀的插件（如 myPlugin.ts）和带 .client 后缀的插件（如 myClientPlugin.client.ts），会在客户端执行。

此步骤之后，Nuxt 调用 app:created 钩子，可用于执行额外的逻辑。
阅读更多 Docs > Guide > Directory Structure > Plugins.

步骤 2：路由验证

此步骤与服务器端执行相同，如果 definePageMeta 函数中定义了 validate 方法，则会执行该方法。

步骤 3：执行 Nuxt 应用中间件

Nuxt 中间件在服务器和客户端都运行。如果希望某些代码在特定环境中运行，可以考虑使用 import.meta.client（客户端）和 import.meta.server（服务器）进行拆分。

阅读更多 Docs > Guide > Directory Structure > Middleware#when Middleware Runs.

步骤 4：挂载 Vue 应用程序并进行激活

调用 app.mount('#__nuxt') 将 Vue 应用程序挂载到 DOM。如果应用程序使用 SSR 或 SSG 模式，Vue 会执行激活步骤，使客户端应用程序具有交互性。在激活期间，Vue 重新创建应用程序（不包括服务器组件），将每个组件与其对应的 DOM 节点匹配，并附加 DOM 事件监听器。

为确保正确激活，保持服务器和客户端数据的一致性很重要。对于 API 请求，建议使用 useAsyncData、useFetch 或其他支持 SSR 的组合式API。这些方法确保在服务器端获取的数据在激活期间被重用，避免重复请求。任何新请求都应在激活后触发，以防止激活错误。

挂载 Vue 应用程序之前，Nuxt 调用 app:beforeMount 钩子。
挂载 Vue 应用程序之后，Nuxt 调用 app:mounted 钩子。

步骤 5：Vue 生命周期

与服务器不同，浏览器会执行完整的 Vue 生命周期。