Vue生命周期函数异步获取数据时的问题

由于async await的作用，created生命周期函数会被加入到微任务的事件队列，所以会先继续向下执行其他函数，等执行完了宏任务，最后在执行事件队列中的微任务。

beforeCreate() {},//组件创建之后async created() {let res = await movieDetail(this.$route.params.filmid);//  console.log(res);this.film = res.data.data.film;console.log(this.film);},//页面渲染之前beforeMount() {},//页面渲染之后async mounted() {console.log(1);},//页面销毁之前beforeDestroy() {},//页面销毁之后destroyed() {},//页面视图数据更新之前beforeUpdate() {console.log(2);},//页面视图数据更新之后updated() {console.log(3);},

打印顺序如下：

下面是一个简单的nextTick例子：

//组件创建之前  new操作符桥梁函数return 之前beforeCreate() {console.log(1);},//组件创建之后created() {//改变数据之后需要diff和patch算法比对（这里是异步操作），需要一定的时间。这时候异步任务就会挂起//nextTick会在diff和patch之后 重新渲染时 找时间再插入this.$nextTick(()=>{console.log(2);})/********下面的setTimeout和nextTick差不多一个原理*/// setTimeout(() => {//    console.log('second',this.$refs.xx.innerHTML);// }, 20);},//页面渲染之前beforeMount() {},//页面渲染之后mounted() {},//页面销毁之前beforeDestroy() {},//页面销毁之后destroyed() {},//页面视图数据更新之前beforeUpdate() {},//页面视图数据更新之后updated() {console.log(3);},

打印结果如下：

这也是异步执行的结果。

Vue生命周期函数异步获取数据时的问题相关推荐

揭秘 React 异步获取数据的进化历程
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本篇文章,以模拟从『Hacker News API[1]』获取热门文章为例,通过一步步地代码优化和封装,阐述 React 异 ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
vue生命周期函数（应用场景要讲到）：
文章目录一,vue生命周期函数: 一,vue生命周期函数: vue的生命周期函数又叫钩子函数: 生命周期方法详解: beforeCreate //详情 //实例创建前,这个时候的 el,data,m ...
vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数，简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
Vue生命周期函数解析及各个组件间调用顺序
Vue生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed befo ...
node 创建静态web服务器（下）（处理异步获取数据的两种方式）
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...

Vue生命周期函数异步获取数据时的问题

Vue生命周期函数异步获取数据时的问题相关推荐

最新文章

热门文章