Nuxt 生命周期

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

本章旨在提供框架各个部分的概览、它们的执行顺序以及它们如何协同工作。

服务端生命周期

在服务端，针对应用的每一次初始请求，都会执行以下步骤：

服务端插件仅一次

Nuxt 由Nitro（一个现代服务端引擎）驱动。

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

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

Nitro 插件仅在服务器启动时执行一次。在无服务器（serverless）环境中，服务器会在每次传入请求时启动，Nitro 插件也会随之启动。不过，它们不会被等待（awaited）。

详见文档 > 4 X > 目录结构 > 服务端#服务端插件。

服务端中间件

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

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

详见文档 > 4 X > 目录结构 > 服务端#服务端中间件。

应用插件

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

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

插件按特定顺序执行，且可能存在依赖关系。有关执行顺序和并行处理的详细信息，请参阅插件文档。

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

在 **文档 > 4 X > 目录结构 > App > 插件** 中阅读更多内容。

路由验证

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

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

有关详细信息，请参阅路由验证文档。

详见文档 > 4 X > 入门 > 路由#路由验证。

应用中间件

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

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

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

Nuxt 在初始页面加载时（服务端和客户端均会执行）以及随后的每一次客户端导航前执行所有全局中间件。命名和匿名中间件仅在页面组件中定义的路由元信息（page meta）的 middleware 属性中指定时才会执行。

关于每种类型的详情及示例，请参阅中间件文档。

服务端上的任何重定向都会导致浏览器收到一个 Location: 响应头；浏览器随后会向该新位置发起新的请求。发生这种情况时，除非保存在 Cookie 中，否则所有应用状态都将被重置。

在文档 > 4.x > 目录结构 > App > Middleware 中阅读更多内容。

页面与组件

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

默认情况下，为了获得更好的性能，Vue 会在 SSR 期间暂停依赖跟踪。

服务端没有响应式，因为 Vue SSR 是以自顶向下的方式将应用渲染为静态 HTML，这使得它无法回头修改已渲染的内容。

你应该避免在 <script setup> 的根作用域中编写产生副作用且需要清理的代码。此类副作用的一个例子是使用 setInterval 设置定时器。在仅限客户端的代码中，我们可以设置一个定时器并在 onBeforeUnmount 或 onUnmounted 中销毁它。然而，由于卸载（unmount）钩子在 SSR 期间永远不会被调用，这些定时器将永久存在。为避免这种情况，请改将副作用代码移至 onMounted 中。

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