vue 钩子函数使用async await

时间 2019-11-26

标签 vue 钩子函数使用 async await 栏目 Java 繁體版

原文原文链接

示例：javascript

<!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中定时时间不一样，查看控制台输出顺序。css

彻底乱套！html

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

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

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

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

await后不能接收非Promise对象。异步

请参考：https://www.jianshu.com/p/2afb088abd08async

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

因此 await 等待的不是全部的异步操做，等待的只是Promise。

因此await 挡不住啊！

vue 钩子函数 使用async await

vue 钩子函数使用async await