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的方法中。
更新！上面代码啪啪打脸！
await后不能接收非Promise对象。
请参考：https://www.jianshu.com/p/2afb088abd08
await setTimeout(...) 或者 await exec(...) 是不行滴，await 不是什么都等，它等待的只是Promise，你如果没有给他返回个Promise，那它还是会继续向下执行。
所以 await 等待的不是所有的异步操作，等待的只是Promise。
所以await 挡不住啊！
vue 钩子函数 使用async await的更多相关文章
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- generator函数与async/await
理解async函数就要先理解generator函数,因为async就是Generator函数的语法糖 Generator 函数 Generator 函数是 ES6 提供的一种异步编程解决方案,可以先理 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- vue钩子函数的妙用之“created()和activated()”
一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
随机推荐
- spring mvc Controller中使用@Value无法获取属性值
在使用spring mvc时,实际上是两个spring容器: 1,dispatcher-servlet.xml 是一个,我们的controller就在这里,所以这个里面也需要注入属性文件 org.sp ...
- linux centos 系统php支持jpeg的安装方法
linux php支持jpeg首先要安裝libjpeg,运行下面的命令: yum install libjpeg* libpng* freetype* gd* 耐心等待完成,重启(service ht ...
- mysql批量insert速度超慢
在进行大批量数据insert的时候,我使用的是hibernate的进行save,而数据库采用mysql.但是在save的时候,速度很慢. 刚开始以为是MYSQL进行DNS解析的问题,于 ...
- 异常：javax.el.PropertyNotFoundException: Property 'id' not found on ..........
在后台action中查询数据库返回的UserInfo对象后 将uDisplayName传递到jsp中,jsp中用${userInfo.uDisplayName}接收值时报错: 异常:javax.el. ...
- C++“窗体”程序设计启蒙（之二）
[摘要]本文适合已经完整学习了C++面向对象机制,但在开发窗体程序方面还是零基础的同学.通过本文的引导进行实践体验,目的是消除同学们开发窗体程序的神奇感,为下一步的自学找到感觉.同一时候,能更深入地体 ...
- Javascript时间以及格式化秒
var now = new Date(); timer = $.timer(timeout, function () { var sec_num = Math.ceil((now.getTim ...
- python的内存回收机制即gc模块讲解
最后容易造成内存问题的通常就是全局单例.全局缓存.长期存活的对象 引用计数(主要), 标记清除, 分代收集(辅助) 引用计数为0则会被gc回收.标记删除可以解决循环引用的问题.分代:0代--年轻代:1 ...
- 垃圾收集(GC)中如何确定哪些内存是"垃圾
垃圾收集(Garbage Collection,GC),要设计一个GC,需要考虑解决下面三件事情:(1)哪些内存需要回收?(2)什么时候回收?(3)如何回收? 哪些内存需要回收?根据<Java内 ...
- 数学图形之将曲线(curve)转化成曲面管
在我关于数学图形的博客中,一开始讲曲线的生成算法.然后在最近的章节中介绍了圆环,还介绍了螺旋管以及海螺的生成算法.一类是曲线,一类是环面,为什么不将曲线变成环的图形,毕竟曲线看上去太单薄了,这一节我将 ...
- Pytoch 抽取中间层特征方法
定义一个特征提取的类: 参考pytorch论坛:How to extract features of an image from a trained model from torchvision.mo ...