示例：


<!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(){                     // 最先输出3                     console.log(3)                     await setTimeout(()=>{                         // 1输出的时间依赖于 定时间隔                         console.log(1)                     },100)                     // 5的输出顺序也不是在1后面                     console.log(5)                 },                 async mounted(){                     // 其次输出4                     console.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的方法中。


更新！上面代码啪啪打脸！

await后不能接收非Promise对象。

​



await setTimeout(...) 或者 await exec(...) 是不行滴，await 不是什么都等，它等待的只是Promise，你如果没有给他返回个Promise，那它还是会继续向下执行。

所以 await 等待的不是所有的异步操作，等待的只是Promise。

所以await 挡不住啊！



作者：孟繁贵