Nuxt 生命周期
本章的目标是提供框架不同部分的高级概述、它们的执行顺序以及它们如何协同工作。
服务器
在服务器上,针对您的应用程序的每个初始请求都会执行以下步骤:
步骤 1:设置 Nitro 服务器和 Nitro 插件(仅执行一次)
Nuxt 的基础是 Nitro,一个现代的服务器引擎。
当 Nitro 启动时,它会初始化并执行 /server/plugins
目录下的插件。这些插件可以:
- 捕获并处理应用程序范围内的错误。
- 注册在 Nitro 关闭时执行的钩子。
- 注册请求生命周期事件的钩子,例如修改响应。
步骤 2:Nitro 服务器中间件
初始化 Nitro 服务器后,server/middleware/
下的中间件会针对每个请求执行。中间件可用于身份验证、日志记录或请求转换等任务。
步骤 3:初始化 Nuxt 并执行 Nuxt 应用插件
首先会创建 Vue 和 Nuxt 实例。随后,Nuxt 执行其服务器插件。这包括:
- 内置插件,如 Vue Router 和
unhead
。 - 位于
plugins/
目录中的自定义插件,包括没有后缀的插件(例如myPlugin.ts
)和带有.server
后缀的插件(例如myServerPlugin.server.ts
)。
插件按特定顺序执行,可能相互依赖。有关详细信息(包括执行顺序和并行性),请参阅 插件文档。
app:created
钩子,可以用来执行额外的逻辑。步骤 4:路由验证
在初始化插件并执行中间件之前,如果在 definePageMeta
函数中定义了 validate
方法,Nuxt 会调用该方法。validate
方法可以是同步或异步的,通常用于验证动态路由参数。
- 如果参数有效,
validate
函数应返回true
。 - 如果验证失败,应返回
false
或包含statusCode
和/或statusMessage
的对象,以终止请求。
有关更多信息,请参阅 路由验证文档。
步骤 5:执行 Nuxt 应用中间件
中间件允许您在导航到特定路由之前运行代码。它通常用于身份验证、重定向或日志记录等任务。
在 Nuxt 中,有三种类型的中间件:
- 全局路由中间件
- 命名路由中间件
- 匿名(或内联)路由中间件
Nuxt 会自动为首次进入应用程序和每次路由导航之前执行全局中间件。命名和匿名中间件仅在相应页面组件定义的页面(路由)元数据的中间件属性中指定的路由上执行。
有关每种类型及示例的详细信息,请参阅 中间件文档。
在服务器上的任何重定向都将导致 Location:
头被发送到浏览器;浏览器随后会对这个新位置发起新的请求。当发生这种情况时,所有应用程序状态将被重置,除非它们保存在 Cookie 中。
步骤 6:设置页面和组件
在此步骤中,Nuxt 初始化页面及其组件,并使用 useFetch
和 useAsyncData
获取所需的数据。由于在服务器上没有动态更新,并且没有 DOM 操作,因此 Vue 生命周期钩子如 onBeforeMount
、onMounted
及后续钩子在 SSR 期间不会被执行。
<script setup>
的根作用域中编写需要清理的副作用代码。一种这样的副作用示例是使用 setInterval
设置定时器。在仅客户端代码中,我们可以设置一个定时器,然后在 onBeforeUnmount
或 onUnmounted
中将其拆除。然而,由于在 SSR 期间永远不会调用卸载钩子,这些定时器将会永远存在。为避免这种情况,请将您的副作用代码移动到 onMounted
中。步骤 7:渲染并生成 HTML 输出
在所有组件初始化并获取数据后,Nuxt 将组件与来自 unhead
的设置结合,生成完整的 HTML 文档。此 HTML 以及相关数据将发送回客户端以完成 SSR 过程。
app:rendered
钩子。render:html
钩子。此钩子允许您操作生成的 HTML,例如注入额外的脚本或修改元标签。客户端(浏览器)
生命周期的这一部分完全在浏览器中执行,无论您选择哪种 Nuxt 模式。
步骤 1:初始化 Nuxt 并执行 Nuxt 应用插件
此步骤与服务器端执行相似,包括内置插件和自定义插件。
位于 plugins/
目录中的自定义插件,例如没有后缀的插件(例如 myPlugin.ts
)和带有 .client
后缀的插件(例如 myClientPlugin.client.ts
),在客户端执行。
app:created
钩子,可以用来执行额外的逻辑。步骤 2:路由验证
此步骤与服务器端执行相同,如果在 definePageMeta
函数中定义了 validate
方法,则包括该方法。
步骤 3:执行 Nuxt 应用中间件
Nuxt 中间件在服务器和客户端上运行。如果您希望某些代码在特定环境中执行,请考虑分别使用 import.meta.client
和 import.meta.server
进行拆分。
步骤 4:挂载 Vue 应用程序和水合
调用 app.mount('#__nuxt')
将 Vue 应用程序挂载到 DOM。如果应用程序使用 SSR 或 SSG 模式,Vue 会执行水合步骤,使客户端应用程序变得可交互。在水合过程中,Vue 重新创建应用程序(不包括 服务器组件),将每个组件与其相应的 DOM 节点匹配,并附加 DOM 事件监听器。
为确保正确的水合,保持服务器和客户端数据的一致性非常重要。对于 API 请求,建议使用 useAsyncData
、useFetch
或其他支持 SSR 的组合。这些方法确保在水合期间重用在服务器端获取的数据,避免重复请求。任何新的请求仅应在水合后触发,以防止水合错误。
app:beforeMount
钩子。app:mounted
钩子。步骤 5:Vue 生命周期
与服务器不同,浏览器执行完整的 Vue 生命周期。