「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

nuxt生命周期

首先，先附上官网的文档

nuxt生命周期是在nuxt项目构建完成后，用户在客户端输入url后的一些列动作，由先到后的执行顺序如下（以下是基于SSR服务端渲染）：

nuxt start：服务端启动项目后，服务端中加载Nuxt、中间件以及Nuxt插件（Nuxt插件的引入根据nuxt.config.js中定义的先后顺序），下面进入到生命周期：

1. nuxt ServerInit: 服务端中运行；有两个参数，第一个是Vuex的上下文，第二个是Nuxt的context， Vuex用于预填存储状态；该钩子在store/index.js中定义；

2. Middleware:

• 在页面渲染之前执行；
• 执行顺序为：
  • 全局中间件（在nuxt.config.js中定义: router: { middleware: ['auth']}）
  • 布局中间件（layouts中定义）
  • 路由中间件（在page中定义，通过middleware: 'auth'）；
• 服务端中的全局中间件配置为：serverMiddleware: []
• 客户端中的全局中间件配置为：middleWare: []
• 中间件写法为:

  export default function(context){
      // ………………页面跳转之前做权限判断或其它
  }
  

  context上下文对象包含了vuex上下文、route对象等，具体如下：

3. validate(): 在页面渲染之前执行；用于校验动态路由参数是否合法，必须返回布尔值（true或false)；只能在页面中定义；

4. asyncData() 和 fetch(context)

   • asyncData():
     • 每加载一次页面之前执行，只能在页面中定义；
     • 传参为当前页面的上下文对象，并且支持给data赋值，方法最后return出来即可；
     • 该方法在页面初始化之前执行，因此无法获取this组件示例
   • fetch(context):
     • Nuxt2.12之后新增钩子，同asyncData一样；
     • 传参为当前页面的上下文对象，但是无法为data赋值，可以拿到Vuex上下文，用于在页面渲染之前预设store状态树；
     • fetch()在页面渲染之前执行，因此此时无法获取this组件示例

5. beforeCreate: Vue实例注册完成之后执行；运行环境包括服务端和客户端，用法同vue差不多；

6. created: Vue示例创建完成之后执行；运行环境包括服务端和客户端，用法同vue差不多；

7. fetch: Nuxt2.12之后新增钩子，此时，this上下文可用，fetch()方法处于pending状态，即pending=true；

8. beforeMount: 此时，DOM节点可用，fetch()方法也已完成，即pending=false；该钩子只在客户端运行，用法同 vue；

9. mounted： 用法同 vue

10. beforeUpadate： 用法同 vue

11. updated： 用法同 vue

12. beforeDestroy： 用法同 vue

13. destroyed： 用法同 vue