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

已于 2022-11-06 12:48:58 修改
阅读量2.7k 收藏 10
点赞数 7
分类专栏： js vue 文章标签： vue.js 前端 javascript
于 2022-05-27 14:07:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60163657/article/details/125002291
版权
vue 同时被 2 个专栏收录
22 篇文章 1 订阅
订阅专栏
js
18 篇文章 1 订阅
订阅专栏

在Created生命周期Data生成，请求返回的数据需要挂载在data上，所以Created里是可以请求的，但 Created 的这时候DOM还没有初始化；

Mounted生命周期里DOM才渲染完成

beforeCreate  // 这时候data，methods函数未挂载
created       // data已挂载、methods函数已挂载
beforeMount   // 相关的render函数首次被调用,dom未挂载
mounted       // dom已渲染挂载完成
beforeUpdate
updated
beforeDestroy
destroyed

如果我们的请求不需要获取/借助/依赖/改变DOM，这时请求可以放在Created

反之则可以放在Mounted里

异步请求数据

1、对于作为子组件被调用的组件里，异步请求应当在mounted里调用，因为这个时候子组件可能需要涉及到对dom的操作；

2、对于页面级组件，当我们需要使用ssr（服务端渲染）的时候，只有created是可用的，所以这个时候请求数据只能用它；

3、对于页面级组件， 当我们做异步操作时，涉及到要访问dom的操作，我们仍旧只能使用mounted;

对于一般情况，created和mounted都是可以的；

puzhiren819
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue在created里面请求数据，在mounted里面加载echarts
weixin_35753291的博客
12-20 998
在 Vue 中，可以在组件的 created 钩子函数中发起数据请求，在 mounted 钩子函数中加载 ECharts。 具体来说，你可以在 created 钩子函数中使用 axios 或者 fetch 等方法发起请求，获取数据之后将数据存储在组件的数据中(通常是使用 data 选项)。然后在 mounted 钩子函数中，使用 ECharts 的 API 将数据渲染成图表。 例如： <te...
谈一谈vue请求数据放在created好还是mounted里好
10-15
主要介绍了谈一谈vue请求数据放在created好还是mounted里好的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中数据请求在created和mouted的区别
最新发布
BradenHan的专栏
01-25 792
created 是在组件实例;mounted 是。触发时机上 created是比 mounted 要更早的，两者的相同点: 都能拿到实例对象的属性和方法。讨论这个问题本质就是(因为此时页mounted面结构已经生成) ，但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动dom放在created生命周期当中。更多详细内容，请前端爱好者。
请求应该放在create还是mounted中？
lmf13992427957的博客
09-28 1516
回归问题：在实际开发中请求不论放在created还是mounted大多时候还是没有区别的，因为created和mounted都是同步的，而请求是异步的，不会堵塞页面渲染的主线程，我们也不能控制请求回来的时间。但是还没有挂载到页面上。但是如果是需要操作dom相关的请求，就要在mounted中执行，因为这时候也能才挂载完成，才可以进行dom操作。2、mounted:中文意思挂载完成，这时候初始化页面完成，此时页面已经渲染出来了，可以进行dom操作。
ajax请求是放在created还是mounted
haofeng___的博客
07-04 376
在created钩子中发起Ajax请求，可以在组件初始化时就获取数据，并进行一些预处理操作。例如，可以在请求成功后将数据存储到组件的数据属性中，以供后续使用。在mounted钩子中发起Ajax请求，可以在组件挂载到DOM后立即获取数据，并进行一些DOM操作或其他依赖于DOM的操作。mounted生命周期钩子在Vue实例挂载到DOM后调用，此时Vue实例已经与DOM元素建立关联，可以访问和操作DOM。优点：可以在组件初始化的早期阶段就获取数据，减少渲染等待时间，使得组件在挂载到DOM之前就具备数据。
在created和mounted去请求数据，有什么区别?
qq_59068526的博客
10-17 1077
在created和mounted去请求数据，有什么区别?
vue mounted 调用两次的完美解决办法
10-17
- **避免在 `mounted` 中进行昂贵操作**：如大量计算或网络请求，这些更适合放在 `created` 或者使用 `async/await` 结合 `mounted`。 - **利用 Vue 提供的工具**：例如 `Vue.set` 用于安全地向响应式对象添加属性...
解决vue keep-alive 数据更新的问题
12-01
通过将数据获取的逻辑放入`activated`钩子，无论用户何时返回到这个缓存的组件，数据都会得到正确更新。这样，我们就可以利用`<keep-alive>`的优势，同时避免了因生命周期改变导致的数据不更新问题。 需要注意的是...
vue.js中使用echarts实现数据动态刷新功能
10-17
此外，如果你的数据是通过Ajax请求获取的，可以将请求放在`created`或`beforeMount`钩子中，然后在数据更新后调用`setOption`。例如： ```javascript async created() { const response = await axios.get('your/...
Ajax 请求到底应该放在 created 里还是 mounted 里？？？
老电影故事的博客
08-23 225
我是倾向于放在mounted里，其实差别不大，但是在mounted里整体逻辑会更清晰但是也看到有人说 应该放在created 有助于一致性 ssr不支持beforemount mounted。
说说Vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别
weixin_50367873的博客
12-20 992
(例如。
vue在created钩子函数的数据在mounted钩子获取不到？
qq_45651008的博客
12-10 2968
vue在created钩子函数请求异步数据，在mounted钩子获取不到的问题 data() { return { bannerList: [], }; }, methods:{ getSwiperList() { // 获取列表 getMlistAPI().then( (res) => { this.bannerList = res.data.data.list; } );
vue 在哪个生命周期进行数据请求
CKT0816的博客
07-31 1万+
看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。 在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素 而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。 应用 vue中实现先请求数据再渲染dom 在项目中遇到了一个问题，下面是vue template
Vue生命周期详解
热门推荐
写代码的渣渣苏
03-24 3万+
Vue生命周期详解
mounted里获取不到异步请求数据，解决
我爱美女S的博客
10-18 1628
mounted里获取不到异步请求数据，解决
异步请求到底放在生命周期中的created还是mounted？
m0_66316685的博客
11-14 1092
异步请求到底放在生命周期中的created还是mounted？
vue在created钩子函数请求异步数据，在mounted钩子获取不到？
Dark_programmer的博客
05-20 1万+
异步数据问题1.created、mounted的定义1.1 created1.2 mounted2.问题现象及解决办法 1.created、mounted的定义 1.1 created 附一个官方对于created的定义 ： 【created】 在示例创建完成后被立即调！ 在这一步，实例已完成以下的配置： 数据观测 (data observer)， property 和方法的运算， watch/event 事件回调。 然而，挂载阶段还没开始，$el property 目前尚不可用。 注意： 在此生命周期
vue从后端接口获得的数据写在created中,而不是mounted中
hellenYuan的博客
12-22 2593
vue从后端接口获得的数据写在created中比较好 由于之前我对vue的生命周期各个阶段没有完全搞懂，一般我会把所有的数据初始化放在mounted中，但是今天我搞懂了： created是发生在mounted之前的，template还没有被渲染成html，但是在这个阶段已经可以获取到props和data了，所以在这一个步进行数据赋值是比较恰当的. mounted 顾名思义是页面已经渲染完成了，template已经被渲染成了html，这个时候再进行数据请求，很有可能会造成页面闪屏。 ...
created和mounted请求数据
08-30
在Vue组件的生命周期中，可以在created和mounted这两个生命周期钩子函数中请求数据。 在created生命周期中，组件实例已经创建完成，但是DOM元素还没有被挂载到页面上。因此，在created中请求数据时，可以在数据返回后进行一些初始化操作，并将数据挂载到data上，这样可以确保在mounted阶段能够使用到请求到的数据。 而在mounted生命周期中，组件实例已经完成了DOM的挂载，可以访问和操作DOM元素。因此，在mounted中请求数据时，可以直接对DOM进行操作，比如更新页面内容或绑定事件等。 所以，如果需要在请求数据后对数据进行一些初始化操作，可以选择在created中请求数据；如果需要在数据挂载到DOM后进行一些操作，可以选择在mounted中请求数据。具体选择哪个时期请求数据，取决于你的具体需求和场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [谈一谈vue请求数据放在created好还是mounted里好](https://download.csdn.net/download/weixin_38636461/12924719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [请求数据应该放在Created还是Mounted](https://blog.csdn.net/weixin_44786530/article/details/126947696)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [created和mounted时期请求API的区别](https://blog.csdn.net/dongwei666/article/details/126364290)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

puzhiren819

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值