【前端工程化】nuxt项目，asyncData方法不触发的原因排查

预警，初级内容，菜鸟必看，大佬请绕道

首先我们应该了解一下nuxt项目是用于服务端渲染的框架，

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件。

划重点

1. 仅限于页面组件，也就是说这个组件对应着某个路由才会被调用

2. 服务端运行asyncData，是在首屏加载（即，强制刷新时运行）

2. 路由更新之前会被调用，也就是说，在前端使用vue-router之类的路由跳转也会触发页面的asyncData方法，这个时候asyncData由浏览器运行

注意，在开发的时候我们在asyncData中console.log打印的日志能正常展示，但是如果build之后的代码运行起来，就看不到日志了，因为这个日志打印在了服务端，所以可能给你一种asyncData没有执行的感觉。

扩展知识

1. 首屏：一般我们做优化的时候，这个首屏的概念是指在地址栏输入回车后(也就是强制刷新)，显示的第一个页面，前端路由跳转后就不是首屏了

首屏时间是指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要

2. history路由，在地址栏输入回车之后(强制刷新)，走的是后端服务器（此时，asyncData在服务端运行），如果地址不存在就会404；但是前端路由跳转(router.push)等是浏览器的路由切换，所以asyncData在浏览器中运行

 可以自己试一下，从另外一个页面，调用路由切换的方法，network中是找不到这个请求的！但是依旧会调用asyncData方法

this.$router.push({
      path: '/hhhhhhhhhhhhh'
});

所以如果你的asyncData不触发

（1）检查一下是不是正确的写在了页面级别的组件中。

（2）是不是在线上环境(build之后)，以asyncData中打印的日志是否输出，判断了函数是否执行(注意线上环境是不会展示asyncData中的日志的)