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>