created和mounted时期请求API的区别

已于 2022-08-16 13:53:53 修改
阅读量3.2k 收藏 13
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-08-16 13:53:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongwei666/article/details/126364290
版权

在这里插入图片描述

前言

曾经被一位面试官问道：在组件生命周期中，created时期 和 mounted时期都可以去请求API获得数据，在哪个时期请求更好呢？？？当时也是支支吾吾，下面就说下它们两者的区别吧

一、created和mounted介绍？

created时期：这个时期可以操作vue实例中的数据和各种方法，但是还不能对 DOM 节点进行操作

mounted时期：挂载完毕，这时 DOM 节点被渲染到文档内，一些需要 DOM 的操作在此时才能正常进行

二、created和mounted请求接口的区别？

在created时期请求接口拿到页面数据，DOM 还没有渲染，最后数据和DOM会同步渲染在页面中。

在mounted时期请求接口拿到页面数据，DOM 已经渲染到页面中，拿到数据后在渲染数据。

总结

虽然在这两个时期都可以请求API，很多人说看自己喜欢，两个时期都可以。但是我觉得以性能方面考虑还是在 created时期 获得数据会比较好一点。如有不对，请大佬们指点！！！

进击的前端小白、
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谈一谈vue请求数据放在created好还是mounted里好
11-20
建议放在created里 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了 补充知识：vue各阶段数据可使用情况：created，computed，data，prop，mounted，methods，watch created时，可用data和prop中的数据。 c
Vue组件从后端API获取数据并渲染到页面上设计方案和实现方法
03-13
Fetch API是一个现代的JavaScript接口，用于向服务器发送请求并获取响应。在这里，我们向URL `http://api.example.com/data` 发送GET请求，并将返回的数据设置到组件的`dataFromApi`状态上。同时，为了处理可能出现...
created和mounted的区别？
mz929的博客
07-16 1697
因此，如果需要在组件创建时进行一些数据初始化的操作，可以使用created钩子函数；如果需要在组件挂载到页面上后进行一些DOM操作或与后端交互的操作，可以使用mounted钩子函数。created是在实例创建完成后立即执行的钩子函数，此时组件的DOM节点还未生成，数据也还未渲染到页面上。mounted是在组件挂载到页面上后执行的钩子函数，此时组件的DOM节点已经生成，数据也已经渲染到页面上。created和mounted都是Vue生命周期钩子函数，但它们的执行时机不同。
vue的mouted和created在使用时的区别
qq_36445861的博客
10-02 2397
引用：https://www.cnblogs.com/dehuachenyunfei/p/11811969.html 引用：https://blog.csdn.net/xdnloveme/article/details/78035065 首先得先了解浏览器渲染过程: 构建DOM树 构建css规则树,根据执行顺序解析js文件。 构建渲染树Render Tree 渲染树布局layout 渲染树绘制 vue的生命周期中的浏览器渲染: 以下为测试vue部分生命函数 beforeCreate(
created()和mounted()的区别及其用法
qq_52675745的博客
05-31 2705
需要注意的是，created()和mounted()只有在Vue实例被成功创建和挂载后才会执行，如果中间发生了错误或中止，那么这两个函数也不会执行。在使用这两个函数时，要避免过多的依赖全局状态或其他模块，以保证逻辑的灵活性和可重用性。
VUE created与mounted区别
热门推荐
weixin_40913947的博客
04-25 1万+
VUE created与mounted区别
Vue中created和mounted详解
qq_43985303的博客
02-06 6482
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
Vue实例中生命周期created和mounted的区别详解
08-29
本文将重点讨论`created`和`mounted`这两个钩子函数的区别。 首先，`created`钩子函数在Vue实例创建完成后被调用。此时，数据观测（data observer）和事件监听器（event/watcher）尚未设置，但数据已经被初始化。这...
weather-vue:获取世界各地城市的本地时间和天气（OpenWeather API，Vue.js）
05-23
接着，利用Vue的生命周期钩子函数，如`created()`或`mounted()`，在应用加载时发送HTTP请求到OpenWeather API。 API请求通常使用axios或fetch等库来实现。例如，可以使用axios的`get()`方法，将OpenWeather的API...
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 组件的生命周期钩子（如 `created` 或 `mounted`）中调用 API 接口，获取数据： ```javascript import { getAppIndex, getBanner, getTel } from '@/api/api.js'; export default { data() { return {...
vue中created和mounted的区别浅析
10-16
主要给大家介绍了关于vue中created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。 我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。 在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到
Vue.js API
04-19
- Vue实例从创建到销毁的过程有多个预定义的生命周期钩子函数，如`beforeCreate`、`created`、`beforeMount`、`mounted`等，可以在这些钩子中执行初始化操作。 8. **指令系统**： - Vue提供了多种内置指令，如`v-...
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生命周期
weixin_44391237的博客
01-09 168
1，创建前：beforecreate() ,此阶段为实例初始化之后，此时的数据观察和事件机制都未形成（不能访问到vue中的data，methods，computed和watch），同时也不能访问dom节点。2，创建后：created()，这个时候vue初始化完毕，实例已经创建，这个时候就可以访问data，methods，computed，watch之类的方法，但是由于没有挂载到dom渲染，此时页面并没有渲染数据。
3/17 接口请求一般放在哪个生命周期中？
小柒的前端之旅
03-17 1803
前面的话 Vue每日一练，不打烊！！！ 解析 一般情况，我们将请求接口放在mounted中，mounted阶段，el已经挂载，可以操作DOM。 created阶段也可以做一些简单的请求（不操作DOM） 注意：如果是服务端渲染，需要放到created中。因为只支持beforeCreat与created两个钩子。 ...
vue中created和mounted的区别
ydrpw的博客
10-04 2587
总结 beforeCreate 创建之前：已经完成了初始化事件和生命周期 created 创建完成： 已经完成了初始化的注册和相应 beforeMount 挂载之前：已经完成了模板的渲染 mounted 挂载之后：已经完成了HTML虚拟化，创建了el节点可以操作dom beforeDestory 摧毁之前： 整个vue都处在实时监控渲染和更新 destoryed 已经摧毁：已经摧毁了观察者，子元素和事件监听 数据初始化一般放到created里面，这样可以及早发送请求获取数据，如果有依赖dom必须存在的情况，
说说你对Vue生命周期的理解?
海阔天空
04-21 270
生命周期 beforecreate 初始化 created 组件以创建 beforemount 组件挂载前 mounted 组件挂到实例 beforeupdate 组件数据变化，更新之前 updated 数据更新之后 beforeDestroy 组件 实例 销毁之前 \生命周期 描述 beforeCreate 组件实例被创建之初 created 组件实例已经完全创建 beforeMount 组件挂载之前 mounted 组件挂载到实例上去之后 beforeUpdate 组件数据发生变化，更新之前 upd
关于Vue实例的生命周期created和mounted的区别
努力努力在努力的博客
09-04 4851
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性
使用vue实现调用接口加载页面初始数据
最新发布
08-30
使用Vue实现调用接口加载页面初始数据可以通过以下步骤进行: 1. 首先，在Vue的组件中定义一个数据对象，用于存储接口返回的数据。 2. 在组件的created或mounted钩子函数中，使用Vue的内置资源库axios发起网络请求调用接口。 3. 在成功返回数据的回调函数中，将接口返回的数据赋值给组件的数据对象。 下面是一个简单的示例： ```html <template> <div> <h1>{{ title }}</h1> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { title: '', items: [] }; }, created() { axios.get('api-url') .then(response => { this.title = response.data.title; this.items = response.data.items; }) .catch(error => { console.error(error); }); } }; </script> ``` 在上述示例中，我们在组件的created钩子函数中使用axios库发起了一个GET请求，然后将接口返回的数据赋值给组件的data属性中的title和items变量。 这样，在组件渲染时，页面就会加载接口返回的数据，并展示在页面上。 注意：需要安装axios库，并确保接口返回的数据格式正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值