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 期间不会被执行。

应避免在 <script setup> 的根作用域中编写需要清理的副作用代码。例如，使用 setInterval 设置定时器。在仅限客户端的代码中，我们可能会设置一个定时器并在 onBeforeUnmount 或 onUnmounted 中清理它。然而，由于在 SSR 期间卸载钩子永远不会被调用，定时器将一直存在。为避免这种情况，请将副作用代码移到 onMounted 中。