【Nuxt】nuxt的生命周期

Nuxt生命周期

Server端（这部分的生命周期都在服务端执行）

初始化阶段

• nuxt start服务启动
• nuxt generate生成阶段
• nuxt hooks
• Server site Nuxt plugins，按照nuxt.config.js文件中定义的顺序，执行nuxt在服务器端的一些插件

以上都是nuxt的初始化过程 

• nuxtServerInit（如果使用了Vuex，这就是在服务端第一个被调用的生命周期钩子）

  这个函数的第一个参数为Vuex context，第二个参数为Nuxt context

  1、执行一些Vuex中定义的在服务端执行的一些actions，用于对store进行预设

  2、这个函数只能被定义在store/index.js文件下

• Route Middleware阶段，执行路由相关中间件

  会按照顺序执行以下的Global middleware、Layout middleware、Route middleware，

  • Global middleware：在nuxt.config.js中定义的中间件被称为全局中间件，可以在这里进行全局的路由守卫
  • Layout middleware：在layouts中定义的中间件
  • page middware：在pages中定义的中间件

• validate阶段：这个函数在page页面被渲染前执行，可以通过context拿到路由的参数信息，可以用于判断路由动态参数是否合法。这个函数一定要有返回值且必须返回true或false

• 执行asyncData（只能用在page中）、fentch等函数（在page中会在middleware阶段调用，在component中会在created中调用，因为Component会等到父级Component的created之后才会被渲染）

接下来Nuxt会开始渲染html代码

• Vue组件开始初始化，执行Vue生命周期的两个钩子（只支持beforeCreate和creatd）
• Component内的fetch函数
• 序列化状态Serialization of state，这里会调用一个nuxt的hook，render:routeContext
• HTML开始渲染，调用nuxt的honk，render:route
• HTML渲染完成并且发向浏览器后，调用render:routeDone

然后生成HTML文件

• 生成之前，调用一个nuxt的hook，generate:before
• 先生成静态页面generate:page(HTML可编辑)，再生成路由，generate:routeCreated（路由生成完毕）
• 整个HTML文件生成完成generate:done

Client端（这部分生命周期在浏览器端执行）

• 收到HTML，并且加载css、JavaScript等资源
• client-site plugins，按照nuxt.config.js文件中定义的顺序，执行nuxt在浏览器端的一些插件（页面跳转时，是从这里开始的，不会再去请求页面）
• Vue处理浏览器接收的HTML，比如：数据响应式处理
• 执行middleware，Global middleware、Layout middleware、Route middleware
• 等待asyncData执行结果
• 执行Vue生命周期钩子

总结

服务器端：

• nuxt初始化
• nuxtServerInit，用于对Vuex store进行预设
• Rotue Middleware，执行路由中间件，可以进行路由守卫
• Validate，验证路由动态参数，必须返回布尔值
• asyncData和fetch等函数执行
• Vue组件的beforeCreate，created
• 渲染HTML并且发送给客户端

客户端：

• 收到HTML
• 执行中间件，和服务端的中间件不同
• Vue处理HTML，添加响应式
• 等待asyncData数据，fullfilled后开始Vue的渲染流程