[nuxt】Nuxt的生命周期

官网的生命周期介绍： Nuxt Lifecycle
我们结合Vue的生命周期钩子来理解。
画了一张图便于理解：

• nuxtServerInit 服务端初始化
• middleware 中间件运行
• ·validate()·校验参数
• asyncData() & fetch() 异步数据处理
• Render 客户端开始渲染

1.nuxtServerInit
在s t o r e \color{FF7D00}{store}store目录下新建i n d e x . j s \color{FF7D00}{index.js}index.js，并写入以下内容：

export const actions = {
  nuxtServerInit(store, context) {
    // 可以在这里初始一些内容到store中
    console.log('nuxtServerInit!!!');
  }
};

npm run dev启动项目。
启动成功后，我们访问一下http://localhost:3000/页面。然后看服务端打印的内容：

√ Client
  Compiled successfully in 2.54s

√ Server
  Compiled successfully in 2.17s

i Waiting for file changes                                                                                                                                                                              11:12:40
i Memory usage: 171 MB (RSS: 245 MB)                                                                                                                                                                    11:12:40
i Listening on: http://localhost:3000/                                                                                                                                                                  11:12:40
nuxtServerInit!!! 

这说明我们写在s t o r e / i n d e x . j s \color{FF7D00}{store/index.js}store/index.js中的n u x t S e r v e r I n i t \color{FF7D00}{nuxtServerInit}nuxtServerInit方法在页面加载时被自动调用
2.middleware
middleware的执行顺序：nuxt.config.js中配置的 -> 匹配layouts -> 匹配pages
在middleware{middleware}middleware目录下新建f i l t e r . j s \color{FF7D00}{filter.js}filter.js，并写入以下内容：

export default ({ store, route, redirect, params, query, req, res }) => {
  // context 服务端上下文
  console.log('middleware nuxt.config.js !!!');
}

在 nuxt.config.js{nuxt.config.js}nuxt.config.js中插入内容：

router: {
  middleware: 'filter'
},

注：修改了配置文件需要重启才能生效。
修改layouts{layouts}layouts目录下的d e f a u l t . v u e \color{FF7D00}{default.vue}default.vue:

<template>
  <div>
    <nuxt />
  </div>
</template>

<script>
export default {
  // middleware: 'filter' // 可指向在nuxt.config.js中配置的中间件
  middleware() {
    console.log('middleware layouts!!!');
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>

</style>

修改pages目录下的index.vue，新增内容:
...

<script>
export default {
   // middleware: 'filter' // 可指向在nuxt.config.js中配置的中间件
  middleware() {
    console.log('middleware pages!!!');
  },
}
</script>

重新请求http://localhost:3000/页面。然后看服务端打印的内容：

nuxtServerInit!!!                                                        
middleware nuxt.config.js !!!                                           
middleware layouts!!!                                                    
middleware pages!!!  

应证了前面提到的，middleware的执行顺序：
nuxt.config.js中配置的 -> 匹配layouts -> 匹配pages。
我们可以在中间件中获取服务端的上下文context，做些操作：

middleware(context) {
    // 用context进行一些操作
},

3.validate
修改pages目录下的index.vue,新增内容:

...

<script>
export default {
  ...
  
  // 路由发生变化时，做参数校验
  validate({params, query}) {
    // 进行一些校验操作
    console.log('validate!!!');
    return true;
  }
}
</script>

重新请求http://localhost:3000/页面。然后看服务端打印的内容：

nuxtServerInit!!!                                                        
middleware nuxt.config.js !!!                                           
middleware layouts!!!                                                   
middleware pages!!!                                                     
validate!!!  

如果我们让validate()返回false，重新请求http://localhost:3000/页面：

服务端正常打印信息。

但是，客户端页面会提示所访问的页面不存在。
4.asyncData 和 fetch
页面首次加载时，异步数据的获取代码可写在这两个钩子里面（不能写在Vue的created或者mounted里面，页面获取不到）。
修改pages目录下的index.vue，新增内容:

...

<script>
export default {
  ...
  
  validate({params, query}) {
    // 进行一些校验操作
    console.log('validate!!!');
    return true;
  },
  asyncData(context){
    console.log('asyncData');
    return {
      a: 2000
    }
  },
  data() {
    return {
      b: 1000
    };
  },
  fetch({store}){
console.log('fetch');
  }
}
</script>

重新请求http://localhost:3000/页面。然后看服务端打印的内容：

nuxtServerInit!!!                                                        
middleware nuxt.config.js !!!                                            
middleware layouts!!!                                                    
middleware pages!!!                                                      
validate!!!                                                              
asyncData                                                                
fetch  

客户端界面，我们通过Vue Devtools查看页面的数据store：
5.beforeCreate 和 created

修改pages目录下的index.vue，新增内容:

...

<script>
export default {
  ...
  
  // 客户端和服务端
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
}
</script>

重新请求http://localhost:3000/页面。可以看到服务端打印的内容：

nuxtServerInit!!!                                                        
middleware nuxt.config.js !!!                                            
middleware layouts!!!                                                    
middleware pages!!!                                                      
validate!!!                                                              
asyncData                                                                
fetch                                                                    
beforeCreate                                                             
created 

客户端打印的内容：

beforeCreate                                                             
created 

Vue中的其他生命周期钩子
修改pages目录下的index.vue，新增内容:

...

<script>
export default {
  ...
  
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
}
</script>

注： 服务端渲染不支持 activated 和 deactivate，因此Vue中的这两个生命周期钩子无效。
其他生命周期钩子仅在客户端运行。

总结，在服务端的生命周期钩子中，只能通过context去访问服务端的上下文环境，服务端中的this指向的是undefined，不存在window对象。