Nuxt生命周期大概分为不两大类：nuxt相关 和 vue相关。我们着重讲一下nuxt相关的生命周期。
nuxt生命周期的钩子函数运行在服务端，大致有五个，运行的先后顺序如下：
# 1. nuxtServerInit：服务器初始化
在store文件夹中创建index.js文件，并写入以下代码：
export const actions = {
// 服务初始化：一般会初始化一些东西到 store
nuxtServerInit(store, context) {
console.log('nuxtServerInit', store, context)
}
}
重启刷新页面后，在控制台可看到以下输出：
nuxtServerInit {
dispatch: [Function: boundDispatch],
commit: [Function: boundCommit],
getters: {},
state: {},
rootGetters: {},
rootState: {}
}
.... 此处省略
# 2. middleware：中间件运行，有三种
(a) 在nuxt.config.js中配置，如下：
module.exports = {
router:{
// 指在运行时，指定运行 middlewrae 文件夹下的 auth.js
middleware: 'auth'
}
}
在middlewrae文件夹下创建auth.js并输出一个函数，如下
export default ({store, route, redirect, params,query, req, res})=>{
// 处理全局守卫业务，根据需要而定
consle.log('nuxt.config.js middleware');
}
(b) 在布局layouts里配置，如下：
在layouts文件下的布局页面里定义，例如default.vue
export default {
// 法一：定义在外部即middleware文件夹里
middleware: 'auth'
// 法二：定义在内部
middleware(context){
consle.log('布局级 middleware');
}
}
(c) 单个页面中配置
pages文件夹下的任意一个页面
export default {
middleware(context){
consle.log('页面级 middleware');
}
}
综上，顺序依次为：nuxt.config.js -> layouts - > page
# 3. validate：校验参数
页面还没有初始化时会先校验参数
export default{
validate({params, query}){
return 校验结果 true/false
}
}
成功：正常显示页面
失败：跳转404页面
# 4. asyncData：异步处理数据
读取数据，返回给目标组件
export default{
asyncData(context){
return {
test: '返回的数据'
}
}
}
这里返回的数据会和当前页面的
data进行合并，即用this.test就可访问到返回的数据
# 5. fetch：异步处理数据
读取服务端数据提交给vuex
export default{
fetch({store}){
...
}
}
具体的应用会在以后的篇幅中详细介绍，敬请期待哟~~
