Nuxt 生命周期

无论使用什么工具，了解工具内部的工作原理总能让您更有信心。Nuxt 也不例外。

---

本章旨在概述框架的不同部分、执行顺序以及它们如何协同工作。

Nuxt 生命周期描述了应用程序经过打包、分块和压缩的构建阶段之后发生的事情。此阶段之后发生的事情取决于是否启用了服务端渲染，如果启用，还取决于所选的服务端渲染类型：

动态 SSR（nuxt start）

或静态站点生成（nuxt generate）

生命周期

服务器

对于 SSR，这些步骤在每次首次请求应用程序时执行。

• 启动服务器（nuxt start）

进行静态站点生成时，服务器步骤仅在构建时执行，但对每个要生成的页面执行一次。

• 启动生成过程（nuxt generate）
• Nuxt 钩子
• 服务器中间件
• 服务端 Nuxt 插件
  • 按 nuxt.config.js 中定义的顺序
• nuxtServerInit
  • 仅在服务端调用的 Vuex 动作，用于预填充 store
  • 第一个参数是 Vuex 上下文，第二个参数是 Nuxt 上下文
    • 从这里分发其他动作 → 仅作为服务端后续 store 动作的"入口点"
  • 只能在 store/index.js 中定义
• 中间件
  • 全局中间件
  • 布局中间件
  • 路由中间件
• asyncData
• beforeCreate（Vue 生命周期方法）
• created（Vue 生命周期方法）
• 新的 fetch（从上到下，节点 = 并行）
• 状态序列化（render:routeContext Nuxt 钩子）
• HTML 渲染开始（render:route Nuxt 钩子）
• render:routeDone 钩子，HTML 发送到浏览器时
• generate:before Nuxt 钩子
• 生成 HTML 文件
  • 完全静态生成
    • 例如提取静态载荷时
  • generate:page（HTML 可编辑）
  • generate:routeCreated（路由已生成）
• generate:done 所有 HTML 文件生成完毕时

客户端

无论选择哪种 Nuxt 模式，生命周期的这部分都完全在浏览器中执行。

• 接收 HTML
• 加载资源（例如 JavaScript）
• Vue 水合
• 中间件
  • 全局中间件
  • 布局中间件
  • 路由中间件
• 客户端 Nuxt 插件
  • 按 nuxt.config.js 中定义的顺序
• asyncData（阻塞）
• beforeCreate（Vue 生命周期方法）
• created（Vue 生命周期方法）
• 新的 fetch（从上到下，节点 = 并行）（非阻塞）
• beforeMount（Vue 生命周期方法）
• mounted（Vue 生命周期方法）

使用 NuxtLink 组件导航

与客户端部分类似，通过 <NuxtLink> 导航时，所有步骤都在浏览器中发生。此外，在所有阻塞任务完成之前，不会显示页面内容。

• 中间件
  • 全局中间件
  • 布局中间件
  • 路由中间件
• asyncData（阻塞）
• asyncData（阻塞或加载完全静态载荷）
• beforeCreate & created（Vue 生命周期方法）
• fetch（非阻塞）
• beforeMount & mounted

接下来？