vue 钩子函数使用async await_综合

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>vue 钩子函数 使用async await</title></head><body><div id="app"><div v-for="item in list">{
    {
     item }}</div></div><script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script><script type="text/javascript">var app = new Vue({
    el: '#app',data: {
    list: [1, 2, 3]},async created(){
    // 最先输出3console.log(3)await setTimeout(()=>{
    // 1输出的时间依赖于 定时间隔console.log(1)},100)// 5的输出顺序也不是在1后面console.log(5)},async mounted(){
    // 其次输出4console.log(4)await setTimeout(()=>{
    // 2输出的时间依赖于 定时间隔console.log(2)},100)// 6的输出顺序也不是在2后面console.log(6)}})</script></body>
</html>

通过设置created和mounted中定时时间不同，查看控制台输出顺序。

完全乱套！

只能保证最先输出3 其次输出4。

await后的 5 和 6 也不是在await后输出。

结论是：所有的钩子函数都只是在指定时间执行而已，框架并不关心它们执行的结果，所以你要做的是将async和await放到真正有异步的methods的方法中。

vue 钩子函数 使用async await

vue 钩子函数使用async await