十.在vue中，发送axios请求应该放在created里还是mounted里？详解

独立开发者格瑞

已于 2024-09-13 14:41:44 修改

阅读量417

点赞数 1

分类专栏： Vue面试题详解文章标签： vue.js javascript 前端

于 2024-09-13 14:40:07 首次发布

本文链接：https://blog.csdn.net/qq_44849312/article/details/142210210

版权

Vue面试题详解专栏收录该内容

10 篇文章 2 订阅

订阅专栏

在vue中，发送axios请求应该放在created里还是mounted里？详解

在回答这个问题之前，我们需要知道vue的生命周期钩子顺序：beforecreated（组件创建前，dom元素、data都为undefined）
created（组件创建后，dom元素为undefined、data有值）
beforemounted（组件挂载前，dom元素为undefined、data有值）
mounted（组件挂载后，dom元素有值、data有值）。

如果存在父子组件，则顺序为

父 beforecreated
父 created
父 beforemounted

子 beforecreated
子 created
子 beforemounted
子 mounted

父 mounted

事实上，axios请求在created和mounted中发生是都可以的，但是具体根据业务来判断使用，比如存在父子组件，并且业务上要求子组件的数据要比父组件的数据先出来，那么就应该是：子组件请求放在created或mounted里，父组件请求必须仿真mounted里

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

独立开发者格瑞

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

详解如何在Vue项目中发送jsonp请求

10-16

主要介绍了详解如何在Vue项目中发送jsonp请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

请求数据应该放在Created还是Mounted

09-20

1348

在Created生命周期Data生成，请求返回的数据需要挂载在data上，所以Created里是可以请求的，但 Created 的这时候DOM还没有初始化；2、对于页面级组件，当我们需要使用ssr（服务端渲染）的时候，只有created是可用的，所以这个时候请求数据只能用它；1、对于作为子组件被调用的组件里，异步请求应当在mounted里调用，因为这个时候子组件可能需要涉及到对dom的操作；如果我们的请求不需要获取/借助/依赖/改变DOM，这时请求可以放在Created。反之则可以放在Mounted里。

参与评论您还未登录，请先登录后发表或查看评论

vue发起axios请求最佳方案

blog_pancc的博客

06-05

249

3.组件中调用API接口。

vue发送请求是应该在mounted还是在created生命周期

weixin_46100406的博客

04-15

4705

一个经常会被问到的问题：为什么不在 created 里去发ajax？created 可是比 mounted 更早调用啊，更早调用意味着更早返回结果，那样性能不是更高？首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高；而且，等到异步渲染开启的时候，created 就可能被中途打断，中断之后渲染又要重做一遍，想一想，在 created 中做ajax调用，代码...

vue请求数据方法放在created还是mounted中

weixin_67490903的博客

08-17

2894

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。如果在mounted钩子函数中请求数据可能导致页面闪屏问题。建议放在created里。...

【vue】vue中axios的使用及vue生命周期详解_07

青春木鱼的博客

06-15

1231

ajax 4步非常繁琐；其次jquery中虽然提供了$.ajax()函数，但是仅限于jquery中使用！那么到了vue中，如何一句话发送ajax请求？今后只要在vue中发送ajax请求，几乎都用axios

vue中axios封装请求

weixin_48115183的博客

05-11

6918

执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(fun

Vue全家桶（二）：Vue中的axios异步通信

qq_33290233的博客

06-16

1687

从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造）使用axios需要下载库联系阅读：前端跨域（待更新）

axios在vue项目中的使用实例详解

柯晓楠

05-23

6903

1、基本用法安装 cnpm i axios --save 在 main.js 中引入 axios import axios from 'axios' Vue.prototype.$axios = axios 在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } } &

【三十天精通Vue 3】第三十天 Vue 3中的Nuxt.js框架详解

热门推荐

陈书予

05-09

1万+

简单来说，Nuxt.js是基于Vue.js的一个通用应用框架。它的目的是简化Vue.js应用程序的开发过程，并为开发人员提供更好的体验。借助Nuxt.js，我们可以轻松地搭建一个高质量、高性能的Vue.js应用程序，而不需要手动进行复杂的配置。基于Vue.js：由于Nuxt.js是基于Vue.js构建的，因此我们可以直接使用Vue.js的语法和组件。自动化配置：Nuxt.js提供了一些默认配置，这使得开发者可以省去一些配置环节。

详解Vue中Axios封装API接口的思路及方法

10-14

在 Vue 组件的生命周期钩子（如 `created` 或 `mounted`）中调用 API 接口，获取数据： ```javascript import { getAppIndex, getBanner, getTel } from '@/api/api.js'; export default { data() { return {...

原型链+instanceof+Vue底层原理

m0_65985318的博客

10-18

688

在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。

Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题

Mr. Zhang Xiaojian's Blog

10-12

577

当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。

vue video播放m3u8监控视频