vue的created函数中，方法的执行顺序

最新推荐文章于 2023-10-25 15:49:14 发布
最新推荐文章于 2023-10-25 15:49:14 发布
阅读量2.7w 收藏 30
点赞数 13
分类专栏： js 文章标签： vue的created函数中，方法的执行顺序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42314022/article/details/88701254
版权

vue的created钩子函数中，方法的执行顺序

情景：vue框架中通常在created钩子函数里执行访问数据库的方法，然后返回数据给前端，前端data中定义全局变量接收数据
但是如果你在created中执行了好几个访问数据库的函数，如果对他们的执行顺序是有要求的，那么哪个会先返回，哪个会后返回呢
并不是谁在前谁就先返回，如果你这样想，并且在后执行的函数中对先执行的函数返回的数据进行操作，经常会报错，提示某些属性不存在，或未定义

原因：这是因为js中默认执行网络请求是异步的，他们会按顺序发出请求之后就不管了，谁先返回是不确定的，这样在加载数据的时候不会因为某个网络请求慢，而在一直等待那个请求，导致其他请求阻塞，效率，体验很差

解决方法：
如果一次加载页面需要执行多个网络请求，并且对返回的数据顺序是有要求的，就用.then()函数，当这个函数执行完后再执行下个函数

孟凡聪
关注
  • 13
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
在vue中created、mounted等方法使用小结
01-21
created：html加载完成之前，执行。执行顺序：父组件-子组件 mounted：html加载完成后执行。执行顺序：子组件-父组件 methods：事件方法执行 watch：watch是去监听一个值的变化，然后执行相对应的函数。 computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值 export default { name: draw, data(){ // 定义变量source return { source:new ol.source.Vector({wrapX: false}), } }, p
vue 页面回退mounted函数不执行的解决方案
11-20
前言 最近做项目碰到一个很头大的问题–从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新 经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。 原理 其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks 解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。 当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created
Vue生命周期函数执行顺序（使用注意事项）
weixin_43749805的博客
05-11 2377
Vue.js 是一个基于 MVVM 模式的前端框架，它的核心是一个响应式的数据绑定系统。在 Vue.js 中，组件是一个可复用的 Vue 实例，它拥有自己的生命周期钩子函数，用于在组件生命周期的不同阶段执行一些特定的逻辑。
生命周期函数——created、onload、mounted、updated的执行顺序
weixin_50756332的博客
10-25 2397
此时的this指向VueComponent（其中包含所有的组件数据和方法）created和onload是非常重要的生命周期函数，涉及到组件初始化和数据绑定的顺序。（3）通常我们会在created函数中发送请求获取数据，并将其存储在组件的data中。（2）在created中我们可以访问到组件的数据和方法，并进行一些初始化操作。（1）created是在Vue实例创建完成后立即被执行的。
vue-created、mounted、watch、computed的执行顺序
xxuxioxx的博客
07-01 3320
浅析vue生命周期和watch属性
vue的created函数中方法执行的顺序设置方法
weixin_63136716的博客
01-06 4095
vue的created函数中方法执行的顺序设置方法
Vue---created()使用的注意事项--执行顺序
weixin_56851586的博客
11-10 4428
vue框架中通常在created钩子函数里执行访问数据库的方法，然后返回数据给前端，前端data中定义全局变量接收数据。例如：当需要将数据库数据显示到页面时，就可以将获取表数据的方法在created()进行调用，在页面渲染之前就将数据获取。并不是按照顺序执行，如果将多个这种类型的方法放入created(）中会造成数据获取失败。将上面调用一个数据库的方法之间有数据联系的放在一个方法中。如下这种形式，下面4种方法都要调用同一数据库。对于要调用数据库的多个方法。对于普通的方法调用，
created方法中调用接口的执行顺序控制
m0_56683897的博客
08-15 471
然后我又想到setTimeout，定时器是直接解决函数执行顺序的方法了，但是同样也有弊端，因为没有办法确定第一个调用接口的响应时长，设置过长，用户体验感势必不会太好，设置过短，如果更换服务器或者网络过慢，后续接口就不会调用，引起更大的问题。众所周知，vue是单页面应用，我们在加载一个页面的时候，有些接口需要在页面创建时就调用，从接口中获取数据，然后渲染在页面上，简单来说就是在钩子函数created阶段调用接口。那么重点来了，调用接口我们是要操作数据啊，那么，调用其他方法自然也是操作数据的一部分，
Vue 中常用的 钩子函数 和执行的先后顺序
qq_39275718的博客
12-30 883
函数 介绍 beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用此时 data 和 methods 以及页面的DOM 结构都没有初始化什么都做不了 created 在实例创建完成后立即调用此时 data 和 methods 已经可以使用 但是页面还没有渲染出来 deforeMount 在挂载开始之前被调用 此时页面上还看不到真是的数据只是模板而已 mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在...
对vue里函数的调用顺序介绍
11-28
created和ready都是 vue 组件的生命周期 created 类型： Function 详细： 在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM...
vue中各选项及钩子函数执行顺序详解
12-11
在vue中，实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的。 vue的生命周期如下图： 在页面首次加载执行顺序有如下： beforeCreate //在实例初始化之后、创建之前执行 created //实例创建后执行...
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点...
如何用js遍历对象数组及对象属性
热门推荐
qq_42314022的博客
12-10 1万+
如何用js遍历对象数组及对象属性 条件：在Vue中objectList:[] 接收的后台数据是一个对象数组，对其进行遍历，得到某个具体的对象 for(var item=0;item<this.objectList.length;item++){ //遍历对象数组，item表示某个具体的对象 for(var i in item){ //使用for in 遍历对象属性 console....
vue中给对象添加属性
qq_42314022的博客
02-24 1万+
vue中给对象添加属性 当我们从后台获取到对象后，给获取的对象添加一个新属性 使用this.$set(a,b,c)添加新属性 这里有a,b,c三个参数 a:对象 b:属性名 c:属性值 例：Student是一个对象，给Student对象添加一个sex属性，值为男（String类型） this.$set(this.Student,sex,“男”) ...
js中判断两个字符串是否相等
qq_42314022的博客
03-12 8771
js中判断两个字符串是否相等 java中使用equals方法判断两个字符串是否相等，在js中用equals方法会报错：equals不是方法， 在js中使用== 号和===号来判断两个字符串是否一致 ...
vue+element 中select选中的值是一个对象时的使用
qq_42314022的博客
12-17 5849
vue+element 中select选中的值是一个对象时的使用 条件：vue+select使用如果选中的值是一个对象： 前端代码： <el-select v-model="versionTemp" value-key="versionId"> <el-option v-if="item
框架搭建内容合成的描述
最新发布
04-19
框架搭建内容合成的描述
在vue的created里面有没有执行顺序
07-13
在 Vue 的 `created` 钩子函数中，可以执行一些初始化的操作。`created` 在实例创建完成后被调用，此时实例已完成数据观测（data observer）和事件初始化。 在一个 Vue 组件中，如果存在多个 `created` 钩子函数，它们会按照顺序依次执行。具体的执行顺序是根据组件的继承关系和组件的定义顺序决定的。父组件的 `created` 会先于子组件的 `created` 执行。 以下是一个示例，演示了 Vue 组件中多个 `created` 钩子函数的执行顺序： ```javascript Vue.component('child-component', { created() { console.log('Child component created'); } }); Vue.component('parent-component', { created() { console.log('Parent component created'); } }); new Vue({ el: '#app', created() { console.log('Root component created'); } }); ``` 在上述示例中，首先会输出 "Root component created"，然后是 "Parent component created"，最后是 "Child component created"。这是因为根组件的 `created` 钩子首先被调用，然后是父组件的 `created` 钩子，最后是子组件的 `created` 钩子。 需要注意的是，如果你在组件中使用了异步操作（例如发送网络请求或使用定时器），Vue 的生命周期钩子函数可能无法保证执行顺序。在这种情况下，你可能需要使用其他方式来管理异步操作的执行顺序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值