vue中方法执行顺序问题及分析
更新时间：2025年10月15日 15:57:47 作者：fanger0705
文章介绍了在VUE开发中遇到异步方法执行顺序的问题,通过引入async和await关键字,实现方法按顺序执行,从而解决数据渲染前console.log提前输出的问题,并简要说明了async和await的用法与原理
vue方法执行顺序问题
实际应用中，需要获取json文件中的数据渲染nodes
运行后发现console.log(this.nodes)这行代码先于this.getNodes执行。
了解原因VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制，不一定一个方法执行完再执行另一个。
即在此表现为this.getNodes已经开始执行，但还未完全执行结束就开始执行console.log(this.nodes)。
为了解决上面问题
让this.getNodes之心完成之后在执行下面的方法，需要引入async，await方法
async
async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async 函数返回的是一个promise 对象，可以使用then方法添加回调函数。
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
await
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。
修改后的代码，可以实现顺序执行
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了VUE实现密码验证与提示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文主要介绍了django+vue项目搭建实现前后端通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了Vue3编写气泡对话框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
开发中经常会使用环境变量,Vite相比于Webpack也有一定的变化,下面这篇文章主要给大家介绍了关于如何在vite里获取env环境变量的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue通过过滤器实现数据格式化的方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现，Vue使用了一个方式来实现Array类型的监测就是拦截器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
vue3使用别名报错问题的解决办法(vetur插件报错问题)
最近在写一个购物网站使用vue,使用中遇到了问题,下面这篇文章主要给大家介绍了关于vue3使用别名报错问题的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。接下来通过本文给大家分享vue渲染时闪烁{{}}的问题及解决方法，感兴趣的朋友一起看看吧2018-03-03
Vue3之Vite中由element ui更新导致的启动报错解决
这篇文章主要介绍了Vue3之Vite中由element ui更新导致的启动报错解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论