示例：

<!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对象。

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

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

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

所以await 挡不住啊！

vue 钩子函数 使用async await的更多相关文章

  1. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  2. Vue钩子函数

    Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...

  3. vue 钩子函数的使用

    1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...

  4. generator函数与async/await

    理解async函数就要先理解generator函数,因为async就是Generator函数的语法糖 Generator 函数 Generator 函数是 ES6 提供的一种异步编程解决方案,可以先理 ...

  5. vue 钩子函数的初接触

    vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...

  6. vue 钩子函数

    beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...

  7. vue钩子函数的妙用之“created()和activated()”

    一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...

  8. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  9. VUE钩子函数created与mounted区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.

随机推荐

  1. android WebView中js的alert()失效

    WebView的设置代码 wv = (WebView) findViewById(R.id.webView1); wv.getSettings().setJavaScriptEnabled(true) ...

  2. Oracle 12c on Solaris 10 安装文档

    http://www.orasql.com/blog/archives/2013/08/20/12c_solaris.htm

  3. 老生常谈ajax

    一,js中的ajax ajax(Asynchronous Javascript And XML)即为异步的JavaScript和XML,顾名思义,这个技术是和我们当前页面刷新无关的,因为它是异步的,在 ...

  4. android应用名称设置的问题

    <application             android:label="@string/app_name1" <activity             and ...

  5. JSONObject以及json（转）

    一.JAR包简介      要使程序 可以运行 必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包:      1.commons-lang.jar      2.commons- ...

  6. Unity3.x游戏开发经典教程 书例 100%完毕~

    大家都公布自己的作品,作为一个新人,我也发点什么.刚刚做完了Unity3.x游戏开发经典教程书例不久,假如有同学想学这本书入门U3D,我的作品也能让新人參考一下...脚本都是C#写的.以下附上链接~ ...

  7. Hadoop-2.2.0中文文档——Common-Hadoop HTTP web控制台认证

    简单介绍 此文档描写叙述了怎样配置Hadoop HTTP web控制台,去要求用户认证. 默认地,Hadoop HTTP web控制台(JobTracker, NameNode, TaskTracke ...

  8. java代码将e.printStackTrace()写入log4j文件异常信息

    try { ... } catch (Exception e) { log.error( "failed!", e ); } 或者 try { ... } catch (Excep ...

  9. 手机网站和PC网站兼容的响应式网页设计

    今天跟大家介绍的这个网站叫 媒体查询  官网域名:http://mediaqueri.es/ 该酷站收集了很多响应式设计的案例.全部都是收集的一些励志精美而时尚的网站,使用媒体查询和响应的网页设计. ...

  10. 15个具有高度影响力的Apache开源项目

    自1999年创立以来,Apache软件基金会如今已成了众多重要的开源软件项目之家.其中成功的项目有Geronimo,有Tomcat,有Hadoop,有如今成了大数据王国关键车毂的分布式计算系统. 虽然 ...