vue中方法执行顺序问题及分析
作者：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后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。
修改后的代码，可以实现顺序执行
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。