2. 程式人生 > >vue 鉤子函式 使用async await

vue 鉤子函式 使用async await

阿新 • • 發佈：2018-12-03 
<!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

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 鉤子函式 使用async await</title&g

vue中使用async/await的實踐

blog 既然 polyfill 解決 bubuko post 情況 vue 異步操作 一、前言 在項目中經常遇到處理異步請求的情況，面對層層的嵌套，回調顯示那麽蒼白無力； async / await是ES7的重要特性之一，也是目前社區裏公認的優秀異步解決方案，既然這樣就用

Vue鉤子函式生命週期例項詳解

vue生命週期簡介 Vue例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。 在Vue的整個生命週期中，它提供了一系列的事件，可以讓我們在事件觸發時註冊js

在vue中使用async/await遇到的坑

為我 解決 官方 ext 分享圖片 col nsf shadow vpd 最近無聊在搞一些新的東西，今天就遇到一個async/await的坑； 因為我用的不是vue官方的腳手架，所以遇到這樣的問題： await is a reserved word 這樣的警告，我猜應該是缺

vue鉤子函式的實現，基本原理就是callback

來看一下Vue中實現鉤子函式部分的原始碼 // ... export function lifecycleMixin (Vue: Class<Component>) { Vue.p

vue鉤子函式對路由進行許可權跳轉

import router from './router'; 使用鉤子函式對路由進行許可權跳轉 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_us

vue鉤子函式

1在最近的一個專案中，需要對input的readonly進行操作，翻遍了vue文件不知道如何下手，最後把目標鎖定在指令上        一，指令的寫法                    direct

非同步函式async await在wpf都做了什麼？

首先我們來看一段控制檯應用程式碼： ```c# class Program { static async Task Main(string[] args) { System.Console.WriteLine($"Thread Id is Thread:{Thread

vue生命週期，鉤子函式

vue生命週期簡介和鉤子函式 一、vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函數了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。 二、生命週期探究 對於執行順序和什麼時候執行，看上面圖基本有個瞭解了。下面我們將結

vue中各選項及鉤子函式執行順序

在vue中，例項選項和鉤子函式和{{}}表示式都是不需要手動呼叫就可以直接執行的。 vue的生命週期如下圖： 在頁面首次載入執行順序有如下： beforeCreate                //在例

對Vue生命週期鉤子函式的理解

對Vue生命週期鉤子函式的理解 例項建立之後，初始化事件和生命週期，而後觸發beforeCreate。beforeCreate，當前例項建立之前，很少操作，一般用於載入動畫，比如建立一個旋轉動畫。created表示當前例項建立完成，元件、屬性等初始化完成，一般封裝一個方法，從網路請求資料

Vue-生命週期（鉤子函式）

參考：https://cn.vuejs.org/v2/guide/instance.html 每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給

vue-cli專案在IE下執行鉤子函式丟擲異常“ReferenceError: “Promise”未定義”的解決辦法

相容IE是個坑，低版本IE很多都沒法跑起來 問題現象：vue-cli專案在IE下執行，會在鉤子函數出現 ReferenceError: “Promise”未定義 解決辦法： step1:安裝最新的web-pack-server 命令列：npm install --save-dev web

vue的宣告週期的鉤子函式

vue的宣告周期函式有11個按照以下順序來的 一. 元件建立前後 1.beforeCreate 2.created 如，寫一個子元件，然後掛在到父元件，在子元件中，console.log 子元件中的 data（）{ return { a:1 },

vue小白必看的生命鉤子函式圖解

  　　　 還有3個鉤子並未出現在圖上： 　　1.activated生命週期鉤子函式在keep-alive 元件啟用時呼叫，該鉤子在伺服器端渲染期間不被呼叫。 　　2.deactivated生命週期鉤子函式在keep-alive 元件停用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。 　　3.

vue路由鉤子函式

一、全域性鉤子 router.beforeEach((to, from, next) => { console.log('beforeEach'); }); router.afterEach((to, from) => { console.log('before

vue js 的生命週期和鉤子函式

 用Vue框架，熟悉它的生命週期可以讓開發更好的進行。 首先先看看官網的圖，詳細的給出了vue的生命週期:    簡單理解為 它可以總共分為8個階段： beforeCreate（建立前）, created（建立後）, beforeMount

Vue的過濾器,生命週期的鉤子函式和使用Vue-router

一.過濾器　　 1.區域性過濾器 在當前元件內部使用過濾器 　　給某些資料 添油加醋 //宣告 filters:{ '過濾器的名字':function(val,a,b){ //a 就是alax ，val就是當前的資料 } } //使用 管道符 資料 | 過濾器的名

從回撥（callback）到 Promise 到非同步函式（async await）

在 promise 被加入到 JavaScript 語言之前，非同步程式碼一般使用基於回撥的 API，尤其是在 Node.js 中。這是一個例子： function handler(done) { validateParams((error) => { if (error) r

vue中async-await的使用誤區

前言 曾經見過為了讓鉤子函式的非同步程式碼可以同步執行，而對鉤子函式使用async/await，就好像下面的程式碼： // exp-01 export default { async created() { const timeKey = 'cost'; console.time(ti