当前位置: 主页 > 发布相关 > AJAX

nuxt.js框架踩坑指南

时间:2023-03-11 02:35:57 AJAX 我要投稿

Nuxt官方文档简单来说,Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在

服务端(Node),客户端,甚至两边都在:

生命周期流程图,红框内的是Nuxt的生命周期(运行在服务端),黄框内同时运行在服务端&&客户端上,绿框内则运行在客户端遇到的问题一、从上面的生命周期可以看出来created会在服务端和客户端执行,因为服务端是没有window、localStorage、sessionStorage、cookie,所以created如果要使用这些对象的话需要先判断在客户端环境下再执行。

二、在created里执行代码又会衍生出另一个问题,如果在created里写了只在客户端执行的代码,这部分代码的效果修改了dom树的话会报错:服务端和客户端dom树不一致这种情况把代码写到mounted下面就行。

三、nuxt项目是自带vuex的,直接写到store文件夹下就行但是每次刷新的时候state中的值又会设成默认的,所以就用到了nuxtServerInit,每次设置state的时候把值也存到cookie中,在nuxtServerInit下再把cookie中的值赋给state,这样就可以正常使用store了。

四、可以通过中间件来判断用户是否登录,没登录跳转到登录页

五、asyncData函数优化 该函数中请求api接口数超过1个,多的甚至达到10,20多个,这种情况我们不能使用async await,请求完一个再接着请求下一个(同步请求接口);如果有10个接口需要请求,每个接口平均响应1s,那么至少需要10s才会响应html页面;如果使用Promise.all异步请求10个接口,那么最快接近1s响应html页面; asyncData函数会在服务端执行代码,因此一定要做好容错处理;另外如果该函数代码一直未执行完,那么页面首次响应将会被挂起,一直处于加载中 对于页面首次加载,该函数执行耗时越短,页面响应时间就越短(页面加载越快)

此外在asyncData中顺序执行的接口除了用await同步请求以外,还可以用下面这种写法

六、sessionStorage和localStorage的区别由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制Web Storage具体又分两种:。

1.sessionStorage:将数据保存在session对象中所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。

七、借助 head 属性,Nuxt.js 让你可以在 nuxt.config.js 中配置应用的 meta 信息。

之后只需要在每个页面配置独有的title属性就行了,title会替换模板中的"%s"

猜你喜欢