Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次)
解决问题前要先了解客户端渲染和服务端渲染的区别
1、客户端渲染
简单理解就是,在服务端放一个html 页面,客户端发起请求,服务端把页面发送过去。客户端从上到下依次解析,如果发现ajax请求就再发送新的请求,拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图:
但是,这种渲染方式存在的弊端也是不容忽视的,比如请求量大时首屏渲染慢,不利于seo等问题。服务端渲染恰好弥补了这些不足。
2. 服务端渲染
也称SSR,即server side render的缩写。在服务端渲染出完整的首屏dom结构,直接发送到浏览器;前端拿到的内容包括首屏及完整spa结构,应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。如图:
服务端渲染有两大优点: 一是更利于SEO。因为爬虫只会爬取源码,不会执行脚本。使用了MVVM框架之后,页面的大多数DOM元素是在客户端根据js动态生成的,可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回已经获取了异步数据并执行js脚本的最终HTML,爬虫就可以抓取完整的页面信息。
二是更利于首屏渲染。对服务端渲染而言,首屏渲染是node发送过来的html字符串,不依赖于js文件,这样用户就能更快地看到页面内容。尤其是大型单页应用,资源请求量大,造成首屏渲染加载缓慢,使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。
Nuxt.js作为Vue.js的通用框架,就常被用来作SSR。
大致了解了两种渲染技术,现在回到问题。
首先我们看一下nuxt.js的生命周期(nuxt.js在vue.js扩展了几个生命周期钩子函数)
不同的钩子函数执行的时机不同。
重复调用问题:使用了beforeCreated()或created(),就会出现调用了两次接口的情况。根据情况改成想要的钩子函数就可以解决问题。
原文:https://blog.csdn.net/weixin_39621975/article/details/111198522