--- title: "Nuxt 生命周期" description: "理解 Nuxt 应用的生命周期可以帮助你更深入地了解框架的运行方式，尤其是针对服务器端和客户端渲染。" canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/guide/concepts/nuxt-lifecycle" --- # Nuxt 生命周期 > 理解 Nuxt 应用的生命周期可以帮助你更深入地了解框架的运行方式，尤其是针对服务器端和客户端渲染。 本章的目标是提供框架中不同部分的高级概览，讲解它们的执行顺序以及它们如何协同工作。 ## Server 生命周期 在服务器端，每个初始请求到应用时，都会执行以下步骤： ::steps ### 服务器插件 :badge[once]{color="info" .align-middle} Nuxt 由 [Nitro](https://nitro.build/) 驱动，这是一个现代的服务器引擎。 当 Nitro 启动时，它会初始化并执行 [`/server/plugins`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/server#server-plugins) 目录下的插件。这些插件可以： - 捕获并处理应用级错误。 - 注册在 Nitro 关闭时执行的钩子。 - 为请求生命周期事件注册钩子，例如修改响应。 :::callout{icon="i-lucide-lightbulb"} Nitro 插件仅在服务器启动时执行一次。在无服务器（serverless）环境中，服务器会在每个传入请求时启动，Nitro 插件也会随之执行。然而，这些插件的执行不会被等待。 ::: :::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/server#server-plugins"} ::: ### 服务器中间件 在初始化 Nitro 服务器之后，`server/middleware/` 下的中间件会在每个请求上执行。中间件可用于身份认证、日志记录或请求转换等任务。 :::warning 从中间件返回一个值将终止请求并将返回值作为响应发送。通常应避免这种行为以确保请求得到正确处理！ ::: :::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/server#server-middleware"} ::: ### 应用插件 Vue 和 Nuxt 实例首先被创建。随后，Nuxt 执行其应用插件。这包括： - 内置插件，如 Vue Router 和 `unhead`。 - 位于 `app/plugins/` 目录下的自定义插件，包括无后缀（例如 `myPlugin.ts`）和带 `.server` 后缀（例如 `myServerPlugin.server.ts`）的插件。 插件按特定顺序执行，并且可能相互依赖。有关执行顺序和并行性的更多详情，请参阅[插件文档](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins)。 :::callout{icon="i-lucide-lightbulb"} 此步骤之后，Nuxt 会调用 [`app:created`](https://nuxt.zhcndoc.com/docs/4.x/api/advanced/hooks#app-hooks-runtime) 钩子，可用于执行其他逻辑。 ::: :::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins"} ::: ### 路由验证 在初始化插件并且执行页面中间件之前，如果在 `definePageMeta` 中定义了 `validate` 方法，Nuxt 会调用该方法。`validate` 方法可以是同步或异步的，通用于验证动态路由参数。 - 如果参数有效，`validate` 函数应返回 `true`。 - 如果验证失败，应返回 `false` 或包含 `status` 和/或 `statusText` 的对象以终止请求。 更多信息，请参阅[路由验证文档](https://nuxt.zhcndoc.com/docs/4.x/getting-started/routing#route-validation)。 :::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/getting-started/routing#route-validation"} ::: ### 应用中间件 中间件允许你在路由跳转前运行代码，常用于身份认证、重定向或日志记录等任务。 在 Nuxt 中，存在三种类型的中间件： - **全局路由中间件** - **命名路由中间件** - **匿名（或内联）路由中间件** Nuxt 会在初始页面加载时（服务器端和客户端均执行）以及之后任意客户端导航之前执行所有全局中间件。命名和匿名中间件仅在对应页面组件的路由元信息 `middleware` 属性指定的路由上执行。 有关每种类型的详情和示例，请参阅[中间件文档](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/middleware)。 在服务器端发生重定向时，会向浏览器发送 `Location:` 头，浏览器随后会发起对该新地址的全新请求。此时所有应用状态都会被重置，除非用 Cookie 进行了持久化。 :::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/middleware"} ::: ### 页面与组件 Nuxt 在此步骤中渲染页面及其组件，并使用 `useFetch` 和 `useAsyncData` 获取所需数据。由于服务器端不存在动态更新也不会进行 DOM 操作，Vue 生命周期钩子如 `onBeforeMount`、`onMounted` 及后续钩子在 SSR 期间**不会**被执行。 默认情况下，为了提升性能，Vue 会在 SSR 期间暂停依赖追踪。 :::callout{icon="i-lucide-lightbulb"} 服务器端无响应式支持，因为 Vue SSR 会将应用自顶向下渲染成静态 HTML，渲染完成后无法修改已渲染内容。 ::: :::important 应避免在 `