Nuxt生命周期
了解 Nuxt 应用程序的生命周期可以帮助您更深入地了解框架的运行方式，尤其是服务器端和客户端渲染。
服务端
对应用程序的每个初始请求都会执行以下步骤：
第 1 步：设置 Nitro 服务器和 Nitro 插件（一次）
Nuxt 由现代服务器引擎 Nitro 提供支持。
当 Nitro 启动时，它会初始化并执行 /server/plugins 目录下的插件。 这些插件可以：捕获并处理应用程序范围的错误。
注册 Nitro 关闭时执行的钩子。为请求生命周期事件注册钩子，例如修改响应。
Nitro 插件仅在服务器启动时执行一次。在无服务器环境中，服务器会根据每个传入请求启动，Nitro 插件也是如此。然而，他们并没有被等待。
第 2 步：Nitro 服务器中间件
初始化 Nitro 服务器后，每个请求都会执行 server/middleware/ 下的中间件。中间件可用于身份验证、日志记录或请求转换等任务。
第3步：初始化Nuxt并执行Nuxt应用插件
首先创建 Vue 和 Nuxt 实例。之后，Nuxt 执行其服务器插件。这包括： 内置插件，例如 Vue Router 和 unhead。 位于 app/plugins/ 目录中的自定义插件，包括那些没有后缀的插件（例如 myPlugin.ts）和带有 .server 后缀的插件（例如 myServerPlugin.server.ts）。 插件按特定顺序执行，并且可能相互依赖。有关更多详细信息，包括执行顺序和并行性，请参阅插件文档。
在此步骤之后，Nuxt 调用 app:created 钩子，该钩子可用于执行其他逻辑。
第 4 步：路由验证
在初始化插件之后和执行中间件之前，如果在definePageMeta函数中定义了validate方法，Nuxt会调用该方法。 validate 方法可以是同步的，也可以是异步的，通常用于验证动态路由参数。 如果参数有效，验证函数应返回 true。 如果验证失败，它应该返回 false 或包含 statusCode 和/或 statusMessage 的对象以终止请求。 有关更多信息，请参阅路由验证文档。
第5步：执行Nuxt应用程序中间件
中间件允许您在导航到特定路线之前运行代码。它通常用于身份验证、重定向或日志记录等任务。 在Nuxt中，中间件分为三种类型： 全局路由中间件 命名路由中间件 匿名（或内联）路由中间件 Nuxt 在初始页面加载时（在服务器和客户端上）执行所有全局中间件，然后在任何客户端导航之前再次执行。命名和匿名中间件仅在相应页面组件中定义的页面（路由）元的中间件属性中指定的路由上执行。 有关每种类型和示例的详细信息，请参阅中间件文档。 服务器上的任何重定向都会导致 Location: 标头被发送到浏览器；然后浏览器向这个新位置发出新的请求。发生这种情况时，所有应用程序状态都将重置，除非保留在 cookie 中。
第 6 步：渲染页面和组件
Nuxt 渲染页面及其组件，并在此步骤中使用 useFetch 和 useAsyncData 获取任何所需的数据。由于服务器上没有动态更新，也没有发生 DOM 操作，因此在 SSR 期间不会执行 Vue 生命周期钩子（例如 onBeforeMount、onMounted 和后续钩子）。 默认情况下，Vue 在 SSR 期间暂停依赖项跟踪以获得更好的性能。 服务器端没有反应性，因为 Vue SSR 将应用程序自上而下渲染为静态 HTML，从而无法返回并修改已渲染的内容。
您应该避免产生副作用的代码，这些副作用需要在
<script setup>的根范围内进行清理。此类副作用的一个示例是使用 setInterval 设置计时器。在仅客户端代码中，我们可以设置一个计时器，然后在 onBeforeUnmount 或 onUnmounted 中将其拆除。但是，由于在 SSR 期间永远不会调用卸载挂钩，因此计时器将永远保留。为了避免这种情况，请将副作用代码移至 onMounted 中。
第 7 步：生成 HTML 输出
在获取所有必需的数据并渲染组件后，Nuxt 将渲染的组件与 unhead 中的设置相结合，生成完整的 HTML 文档。然后，该 HTML 以及关联的数据被发送回客户端以完成 SSR 过程。 将 Vue 应用程序渲染为 HTML 后，Nuxt 调用 app:rendered 钩子。 在最终确定并发送 HTML 之前，Nitro 将调用 render:html 挂钩。该挂钩允许您操作生成的 HTML，例如注入其他脚本或修改元标记。
客户端
无论您选择哪种 Nuxt 模式，生命周期的这一部分都完全在浏览器中执行。
第1步：初始化Nuxt并执行Nuxt应用插件
此步骤与服务器端执行类似，包括内置插件和自定义插件。 app/plugins/ 目录中的自定义插件，例如那些没有后缀（例如 myPlugin.ts）和带有 .client 后缀（例如 myClientPlugin.client.ts）的插件，在客户端执行。
在此步骤之后，Nuxt 调用 app:created 钩子，该钩子可用于执行其他逻辑。
第 2 步：路由验证
此步骤与服务器端执行相同，并且包含 validate 方法（如果在 DefinePageMeta 函数中定义）。
第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 友好的可组合项。这些方法确保在 Hydration 期间重复使用服务器端获取的数据，避免重复请求。任何新请求都只能在水合后触发，以防止水合错误。
在安装 Vue 应用程序之前，Nuxt 调用 app:beforeMount 钩子。 安装 Vue 应用程序后，Nuxt 调用 app:mounted 钩子。
第 5 步：Vue 生命周期
与服务器不同，浏览器执行完整的 Vue 生命周期。