vue请求数据放在created好还是mounted里好

最新推荐文章于 2024-01-25 12:38:57 发布
最新推荐文章于 2024-01-25 12:38:57 发布
阅读量2.1w 收藏 49
点赞数 29
分类专栏： 前端 VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43925811/article/details/90712413
版权
前端 同时被 2 个专栏收录
16 篇文章 1 订阅
订阅专栏
VUE
7 篇文章 0 订阅
订阅专栏

vue请求数据放在created好还是mounted里好

建议放在created里
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

如果在mounted钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了

大橙子Gsc
关注
  • 29
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 路由子组件created和mounted不起作用的解决方法
12-30
判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep exclude=needExcludeComponentName> <router></router> </keep> 使用v-if判断(成功解决) <keep v-if=!$route.meta.noKeepAlive> <router></router> </keep> <router v-if=$route.meta.noKeepAlive></router-vi
谈一谈vue请求数据放在created好还是mounted里好
10-15
主要介绍了谈一谈vue请求数据放在created好还是mounted里好的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue进阶：Vue中的ajax请求
最新发布
做一只猫的博客
01-25 1366
理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了。一、Vue中的ajax请求。
【vue其他相关】欢迎讨论！异步请求放在生命周期中的created还是mounted，已填坑
庞囧的博客
05-24 7738
文章目录前言两个生命周期场景1场景2场景3补充 前言 在百度上搜这个问题，看到的答案都是相互复制粘贴的，而且个人觉得并没具体场景举例说明，并没有好的答案。于是自己立贴，留下这个坑，等日后遇到了一些场景，就把分析写在这里，把这个问题搞明白。 两个生命周期 created：data属性，methods属性，watch监听等都初始化好了，也就是可以使用了。 mounted：已经把内存中编译好的模板替换到页面中，也就是视图层已渲染成最新的，vue 实例完全创建完毕。可以操作DOM，但不保证所有子组件都挂载了。 场景
Vue3 mounted()里调用axios的方法，遇到的坑
y523648的博客
11-07 448
令人惊讶的是，如此简单的需求，在网上几乎找不到正确的解决方法。(不得不吐槽现在的csdn，好多都是复制别人的代码，很多根本就是错的也在复制，浪费时间误人子弟。这样实现没问题，但是我想把axios的调用写到methods方法里，坑来了。我的vue对象里，有个data属性tableData，用于给页面绑定数据。然后网上找了一圈，建议methods的方法 return一个返回值。我想当然的写到一个方法里，然后在mounted里调用。没有效，this.tableData是空的。最近在学习vue3做项目。
vue2的Mounted和vue3的onMounted，这两个钩子有何不同？
杜永康的博客
06-13 1万+
钩子是通过 setup函数来使用的，它必须在组件实例创建之前调用，并返回一个对象，该对象包含组件实例中需要使用的数据、方法和生命周期钩子等。钩子中的函数会在组件挂载到 DOM 上之后执行，与 Vue 2 的 mounted 钩子相同，因此在该钩子中可以访问到组件的 DOM 元素。如果需要访问组件实例中的数据和方法，可以使用。钩子是在组件实例被挂载到 DOM 上之后才被调用的，因此在该钩子中可以访问到组件的 DOM 元素。钩子在组件的子组件被挂载之前被调用，因此如果需要在子组件中访问到父组件的数据，可以在。
vue请求数据方法放在created还是mounted中
weixin_67490903的博客
08-17 2773
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。如果在mounted钩子函数中请求数据可能导致页面闪屏问题。建议放在created里。...
created和mounted时期请求API的区别
dongwei666的博客
08-16 3207
vue组件初始化请求接口 created和mounted生命钩子的区别
说说你对Vue生命周期的理解?
海阔天空
04-21 255
生命周期 beforecreate 初始化 created 组件以创建 beforemount 组件挂载前 mounted 组件挂到实例 beforeupdate 组件数据变化，更新之前 updated 数据更新之后 beforeDestroy 组件 实例 销毁之前 \生命周期 描述 beforeCreate 组件实例被创建之初 created 组件实例已经完全创建 beforeMount 组件挂载之前 mounted 组件挂载到实例上去之后 beforeUpdate 组件数据发生变化，更新之前 upd
vue生命周期函数
weixin_43343980的博客
10-13 162
可调用methods中的方法，访问和修改data数据出发响应式渲染dom，可通过computed和watch完成数据计算。vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM。vue生命周期总共分为8个阶段，创建前后，载入前后，更新前后，销毁前后，以及一些特殊场景的生命周期。此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM。完成数据观测，属性与方法的运算，watch，event事件回调的配置。
【Vue】created、mounted、updated详解
热门推荐
慕白Lee的博客
10-16 5万+
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
解决nuxt页面中mounted、created、watch执行两遍的问题
01-21
在页面中created钩子函数中请求了一个接口，但是页面这个页面加载的时候，接口会连续请求两边，然后我就排查是否有其他地方调用了同样的接口，检查了好几遍后发现并没有，WTF，然后我在created中打印了一下，惊奇的...
vue项目中使用天地图
01-08
1.首先打开天地图注册账号 申请自己所用的key 网址：http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目，这里就不说了 3.将 ...4.创建map.vue文件 ... created(){ }, mounted(){ this.loadmap() },
VUE初始化获取数据应该放到Created还是Mounted中？
m0_46234959的博客
08-01 508
VUE初始化获取数据应该放到Created还是Mounted中？
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
Start2019
11-07 1240
数据更新渲染，axios请求数据，配置环境 一、反向代理 项目根目录创建一个配置文件 vue.config.js ,我们将在此配置一些环境，具体可在 vue-cli 官网上进行查阅。 安装 axios ，并引入 关于vue跨域问题，修改代理后仍出现404 (1) “重新运行cnpm run dev”, (2) “测试接口是否能够正常访问” ...
谈谈你对生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
weixin_45355998的博客
11-24 2990
一、什么是生命周期？ 我理解的生命周期就是：从出生到死亡的过程 二、生命周期有哪些？ Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后 生命周期 描述 beforCreate 组件实例被创建之前 Created 组件梳理被创建完成 beforMount 组件被挂载之前 Mounted 组件挂载完成 beforeUpdate 组件数据更新之前 Updated 件数据更新之完成 beforeDestroy 组件被销毁之前 Destro
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中获取不到props中接收到的值
qq_43437571的博客
03-22 6358
父子组件通信： 父组件中通过v-bind绑定传送，子组件通过props接收 例如： 父组件： <template> <div> <div> <h2>标题</h2> </div> <chart :chartData="chartData"></chart> </div> </template> <script>
请求数据应该放在Created还是Mounted
09-20 1224
在Created生命周期Data生成，请求返回的数据需要挂载在data上，所以Created里是可以请求的，但 Created 的这时候DOM还没有初始化；2、对于页面级组件，当我们需要使用ssr（服务端渲染）的时候，只有created是可用的，所以这个时候请求数据只能用它；1、对于作为子组件被调用的组件里，异步请求应当在mounted里调用，因为这个时候子组件可能需要涉及到对dom的操作；如果我们的请求不需要获取/借助/依赖/改变DOM，这时请求可以放在Created。反之则可以放在Mounted里。
vue在created里面请求的数据在mounted显示undefine
09-13
### 回答1： 在 Vue.js 中，created 钩子函数在实例创建之后立即调用。这意味着在 created 钩子函数中进行的数据请求可能还没有完成。mounted 钩子函数在挂载完成之后调用，此时已经渲染完成，因此如果在 mounted 中访问数据请求的结果，可能会得到 "undefined" 的值。 为了解决这个问题，你可以在数据请求完成之后再调用 mounted 钩子函数，或者将数据请求的代码放在 mounted 钩子函数中进行。 例如，你可以使用 Promise.then 方法来等待数据请求完成： ``` created() { this.fetchData().then(() => { // 数据请求完成 }); }, mounted() { // 数据请求已经完成，可以访问数据了 }, methods: { fetchData() { return axios.get('/api/data').then((response) => { this.data = response.data; }); } } ``` 或者你也可以将数据请求的代码放在 mounted 钩子函数中： ``` mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/data').then((response) => { this.data = response.data; }); } } ``` ### 回答2： 在Vue中，created和mounted是两个生命周期钩子函数。created在组件实例被创建之后立即调用，此时组件的DOM还未被挂载，而mounted在组件的DOM被挂载后调用。如果在created钩子中请求数据，并在mounted中使用这些数据，有可能会出现数据为undefined的情况。 这是因为在created钩子中请求数据时，请求的过程是异步的，数据还未返回就已经进入到了mounted钩子中。因此，在mounted钩子中访问数据时，数据还未被赋值，所以会显示为undefine。 要解决这个问题，可以在created钩子中使用Promise或async/await来确保数据已经返回后再进入到mounted钩子中。 示例代码如下： created() { this.getData().then(data => { this.myData = data; }); }, methods: { async getData() { // 在这里进行数据请求，返回一个Promise对象 return axios.get('api/data') .then(response => response.data) .catch(error => { console.error(error); return null; }); } }, mounted() { // 此时会正确显示数据 console.log(this.myData); } 通过使用Promise或async/await，可以确保在mounted钩子中访问数据时，数据已经被正确赋值，避免了数据为undefined的情况。 ### 回答3： 在Vue中，created和mounted是组件的两个生命周期钩子函数。 在created钩子函数中，组件实例已经创建完成，但是DOM元素还没有渲染出来。所以，在created钩子函数中请求的数据，是可以成功获取到的，但是在mounted钩子函数中显示的时候可能会出现undefined。 造成这种情况的原因可能是请求数据需要一定的时间来获取，并且在mounted钩子函数中可能会更早执行，导致数据还没有获取到。 要解决这个问题，可以使用Vue的异步操作或者Promise对象。例如，可以使用axios库来发送异步请求数据，并且使用Promise对象来保证在获取数据之后再进行显示。 下面是一个示例代码： ```javascript // 在created钩子函数中发送异步请求 created() { axios.get('example.com/api/data') .then(response => { // 获取到数据后赋值给组件的data属性 this.data = response.data; }) .catch(error => { console.log(error); }); }, // 在mounted钩子函数中显示数据 mounted() { // 使用Vue的$nextTick方法来保证数据已经渲染完毕 this.$nextTick(() => { console.log(this.data); // 这里的this.data应该是有值的 }); } ``` 通过使用异步操作和Promise对象，可以确保在mounted钩子函数中获取到的数据不会是undefined。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值