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);
  },

打印结果如下：

这也是异步执行的结果。