关于 nuxt 生命周期

服务端

• 服务启动 (nuxt start)

生成静态网站时，服务端的生命周期仅在构建时执行，但每个生成的页面都执行。

• 生成器启动 (nuxt generate)

• Nuxt hooks

• 服务端中间件（ serverMiddleware）

• 服务端插件（Server-side Nuxt plugins）

  • 在 nuxt.config.js 中设置

• nuxtServerInit

  • Vuex 操作仅在服务端调用去预设 store
  • 第一个参数是** Vuex上下文，第二个参数是 Nuxt.js上下文**
    • 此处调度其他操作→仅“入口点”用于服务器端的后续存储操作
  • 只能够在 store/index.js 中设置

• 中间件（ Middleware）

  • 全局中间件（Global middleware）
  • 布局中间件（Layout middleware）
  • 路由中间件（Route middleware）

• asyncData

• beforeCreate (Vue 生命周期方法)

• created (Vue 生命周期方法)

• 新的 fetch 方法

• 状态序列化 ( Nuxt.js hook 钩子 render:routeContext)

• HTML 渲染 ( Nuxt.js hook 钩子render:route)

• 当 HTML 已经被发送到浏览器render:routeDone 钩子

• generate:before Nuxt.js hook 钩子

• HTML files 已经生成

  • 全部静态生成
    • e.g. 静态文件被读取
  • generate:page (可编辑的HTML)
  • generate:routeCreated (生成的 Route)

• generate:done当所有 HTML 文件都已生成

客户端

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

• 接收 HTML
• 加载 assets (e.g. Javascript)
• 客户端激活（Vue Hydration）
  • 所谓客户端激活，指的是 Vue 在浏览器端接管由服务端发送的静态 HTML，使其变为由 Vue 管理的动态 DOM 的过程
• 中间件（Middleware）
  • 全局中间件（Global middleware）
  • 布局中间件（Layout middleware）
  • 路由中间件（Route middleware）
• 客户端 plugin
  • 在 nuxt.config.js 中定义
• beforeCreate (Vue 生命周期方法)
• created (Vue 生命周期方法)
• 新的 fetch 方法
• beforeMount (Vue 生命周期方法)
• mounted (Vue 生命周期方法)