Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次)

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