预警,初级内容,菜鸟必看,大佬请绕道
首先我们应该了解一下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中的日志的)