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(){
                    // 最先输出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的方法中。

vue 钩子函数 使用async await

猜你喜欢

vue 钩子函数使用async await