Vue请求初始化数据放在Created还是Mounted？

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量3.2k 收藏 4
点赞数
分类专栏： 前端开发 文章标签： javascript vue生命周期 vue vue初始化 前端初始化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/121607568
版权

一般来说，可以在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求。

如：数据初始化一般放到created里面，这样可以及早发请求获取数据，

如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

资料：

超详细vue生命周期解析(详解)深入理解_勤动手多动脑少说多做厚积薄发-CSDN博客代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>...https://blog.csdn.net/qq_22182989/article/details/107196990?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163816274316780261944744%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=163816274316780261944744&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-107196990.pc_v2_rank_blog_default&utm_term=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1018.2226.3001.4450

Vue 获取初始化数据是放在created还是mounted - Kaicy - 博客园官方文档： 也就是说Vue实例中的data和methods已经可以使用了。但是还没有挂载到页面上。可以在created里面去后端获取数据。 当进入mounted这个生命周期函数。此时页面已经渲染出来，https://www.cnblogs.com/kaicy/p/14691165.html

Vue请求初始化数据放在Created还是Mounted？ - 简书1，首先我们看下官网对created和mounted这个2个生命周期怎么定义的：created：（在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (da...https://www.jianshu.com/p/ff8f9bbc7551

Vue笔记（四）—— Vue生命周期中mounted和created的区别_成长笔记-CSDN博客_mounted和createdcreated:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。如：数据初始化一般放到created里面，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* co...https://blog.csdn.net/u012382791/article/details/97622662

南北极之间
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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实例中生命周期created和mounted的区别详解
12-01
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 再上图，
Vue 初始化获取数据应该放到 Created 还是 Mounted 中？
InterestAndFun的博客
11-15 5952
Vue 初始化获取数据应该放到 Created 还是 Mounted 中？ 以下片段摘自官方文档 created： 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。 mounted： 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。 注
axios之Vue请求初始化数据放在Created还是Mounted？
weixin_42776027的博客
05-20 2721
先分析下生命周期 beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载 （1）mounted 　　很多人跟我说初始化放在Mounted里面， 我问她(他)们为什么？她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系？他们会说可以显示请求出来的数据啦。（大家觉得有冲突吗？） DOM初始.
【vue其他相关】欢迎讨论！异步请求放在生命周期中的created还是mounted，已填坑
庞囧的博客
05-24 7724
文章目录前言两个生命周期场景1场景2场景3补充 前言 在百度上搜这个问题，看到的答案都是相互复制粘贴的，而且个人觉得并没具体场景举例说明，并没有好的答案。于是自己立贴，留下这个坑，等日后遇到了一些场景，就把分析写在这里，把这个问题搞明白。 两个生命周期 created：data属性，methods属性，watch监听等都初始化好了，也就是可以使用了。 mounted：已经把内存中编译好的模板替换到页面中，也就是视图层已渲染成最新的，vue 实例完全创建完毕。可以操作DOM，但不保证所有子组件都挂载了。 场景
Vue生命周期详解
热门推荐
写代码的渣渣苏
03-24 3万+
Vue生命周期详解
vue生命周期（数据初始化的请求放在created）
weixin_40642141的博客
03-05 5117
vue生命周期 概念：vue的生命周期指的是vue实例从创建到挂载到销毁的过程，在这个过程中有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 钩子函数有如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 话不多说先贴代码 <!DOCTYPE html...
vue3 数据放置的两种方式
weixin_51057497的博客
10-23 1316
vue data()
VUE页面请求初始化查询参数应该写在什么位置
刘刘刘刘刘牛皮的博客
03-17 805
vue的生命周期
为什么created里面调用了初始化函数，echarts没有显示，在mounted里面调用才显示？
Igiveufireworks的博客
12-23 434
因为在created阶段，挂载未开始，无法获取dom元素。而在mounted阶段数据和DOM都已被渲染出来，所以可以渲染echarts。
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而...在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到
基于Vue实例生命周期(全面解析)
12-10
Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例...
通过源码分析Vue的双向数据绑定详解
12-12
Vue源码的整体架构无非是初始化Vue对象，挂载数据data/props等，在不同的时期触发不同的事件钩子，如created() / mounted() / update()等，后面专门整理各个模块的文章。这里先讲双向数据绑定的部分，也是最主要的...
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 141
官网代码（在取消选中状态的时候不生效）
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1115
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
code袁的博客
04-18 299
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 288
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
AJAX请求（axios篇）
百赢出品，必属精品
04-15 1157
AJAX是“Asynchronous JavaScript and XML”的缩写，它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网页的情况下，异步地向服务器发送请求并获取数据。这使得网页可以更加动态和交互性，而不会中断用户的操作。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境，它可以在前端和后端进行HTTP请求。它的设计简单、易于使用，提供了丰富的功能和选项来处理HTTP请求和响应。
js中的类
weixin_45705239的博客
04-16 175
ES6引入了 JavaScript 类。JavaScript 类是 JavaScript 对象的模板，因此js里的类不是对象。
一般vue在哪个生命周期 请求接口初始化数据
05-10
一般来说，在 Vue 组件的 `created` 生命周期中请求接口初始化数据比较常见。因为在 `created` 生命周期中，组件实例已经创建，但是尚未被挂载到 DOM 中，适合用于初始化数据或者发送异步请求等操作。同时也可以在 `mounted` 生命周期中请求接口初始化数据，不同的是，此时组件已经挂载到 DOM 中，可以访问到 DOM 元素，适合用于执行 DOM 操作。但需要注意的是，如果在 `mounted` 生命周期中请求接口，可能会造成页面闪烁，因为此时数据还未加载完成，页面已经被渲染出来了。因此，为了更好的用户体验，建议在 `created` 生命周期中请求接口初始化数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

南北极之间

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

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

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

打赏作者

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

抵扣说明：

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

余额充值