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(){// 最先输出3console.log(3)await setTimeout(()=>{// 1输出的时间依赖于 定时间隔console.log(1)},100)// 5的输出顺序也不是在1后面console.log(5)},async mounted(){// 其次输出4console.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钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
起因先看一段Vue的代码,在Vue的原型链上增加了一个setData方法,然后实例化Vue对象,传入一个Object类型的参数 Vue.prototype.setData = function (k ...
vue钩子函数beforeRouteEnter
vue钩子函数beforeRouteEnter beforeRouteEnter 函数内部的 this 为 undefined,这是因为 beforeRouteEnter 是在页面创建前就执行的, 先 ...
Vue钩子函数mounted实现进入页面立即查询的功能案例
Vue的钩子函数:当执行到某一阶段就会执行的方法/函数.就相当于spring中bean的生命周期一样.
JavaScript 回调函数/Promise/ async/await
并发和并行并行和并发是两个概念,容易混淆是因为并行和并发在中文意思上相近,其实在英文中,这是完全不相同的东西,并行(parallelism).并发(concurrency). 并行(parallel ...
细说vue钩子函数（生命周期函数）
一.概述钩子函数用来描述一个组件从引入到退出的全过程中的某个过程,整个过程称为生命周期. 钩子函数按照组件生命周期的过程分为:挂载阶段=>更新阶段=>销毁阶段. 二.每个阶段对应的钩子函 ...
VUE 钩子函数参数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):****[指令绑定到元素上执行]bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置.*****[插入到父节点执行 ...
vue钩子函数是什么，有什么没用
文章目录前言目标一.定义二.vue加载过程三.基本的使用参考前言人见白头嗔,我见白头喜目标理解钩子函数,和基本应用一.定义每个 Vue 实例在被创建时都要经过一系列的初始化过程 ...
Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
Vue钩子函数之钩子事件hookEvent,监听组件
在Vue当中,hooks可以作为一种event,在Vue的源码当中,称之为hookEvent. 在Vue组件中,可以用过$on,$once去监听所有的生命周期钩子函数,如监听组件的updated钩子函 ...

vue 钩子函数使用async await

vue 钩子函数使用async await相关推荐

最新文章

热门文章

vue 钩子函数 使用async await

vue 钩子函数 使用async await相关推荐

最新文章

热门文章

vue 钩子函数使用async await

vue 钩子函数使用async await相关推荐