Nuxt 生命周期

理解 Nuxt 应用的生命周期可以帮助你更深入地了解框架的运行方式，尤其是针对服务器端和客户端渲染。

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

服务器生命周期

在服务器端，每个初始请求到应用时，都会执行以下步骤：

服务器插件 once

Nuxt 由 Nitro 驱动，这是一个现代的服务器引擎。

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

捕获和处理应用范围内的错误。
注册在 Nitro 关闭时执行的钩子。
注册请求生命周期事件的钩子，例如修改响应。

Nitro 插件仅在服务器启动时执行一次。在无服务器（serverless）环境中，服务器会在每个传入请求时启动，Nitro 插件也会随之执行。然而，这些插件的执行不会被等待。

在 Docs > 4 X > Directory Structure > Server#server Plugins 中查看详情

服务器中间件

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

从中间件返回一个值将终止请求并将返回值作为响应发送。通常应避免这种行为以确保请求得到正确处理！

在 Docs > 4 X > Directory Structure > Server#server Middleware 中查看详情

应用插件

Vue 和 Nuxt 实例首先被创建。随后，Nuxt 执行其应用插件。这包括：

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

插件按特定顺序执行，且可能互有依赖。关于执行顺序和并行相关的详情，请参阅插件文档。

此步骤之后，Nuxt 会调用 app:created 钩子，可用于执行额外逻辑。

在 Docs > 4 X > Directory Structure > App > Plugins 中查看详情

路由验证

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

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

更多信息请参见路由验证文档。

在 Docs > 4 X > Getting Started > Routing#route Validation 中查看详情

应用中间件

中间件允许你在路由跳转前运行代码，常用于身份认证、重定向或日志记录等任务。

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

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

Nuxt 会在初始页面加载时（服务器端和客户端均执行）以及之后任意客户端导航之前执行所有全局中间件。命名和匿名中间件仅在对应页面组件的路由元信息 middleware 属性指定的路由上执行。

详细类型说明及示例，请见中间件文档。

在服务器端发生重定向时，会向浏览器发送 Location: 头，浏览器随后会发起对该新地址的全新请求。此时所有应用状态都会被重置，除非用 Cookie 进行了持久化。

在 Docs > 4 X > Directory Structure > App > Middleware 中查看详情

页面与组件

Nuxt 在此步骤中渲染页面及其组件，并使用 useFetch 和 useAsyncData 获取所需数据。由于服务器端不存在动态更新也不会进行 DOM 操作，Vue 生命周期钩子如 onBeforeMount、onMounted 及后续钩子在 SSR 期间不会被执行。

默认情况下，为了提升性能，Vue 会在 SSR 期间暂停依赖追踪。

服务器端无响应式支持，因为 Vue SSR 会将应用自顶向下渲染成静态 HTML，渲染完成后无法修改已渲染内容。

应避免在 <script setup> 根作用域中放置需要清理的副作用代码。例如使用 setInterval 创建的定时器。客户端代码中通常在 onBeforeUnmount 或 onUnmounted 钩子销毁这些定时器，但 SSR 期间卸载钩子不会被调用，定时器会永久存在。为避免此问题，应将副作用代码移至 onMounted 中。

观看 Daniel Roe 讲解服务器渲染和全局状态的视频。