created与mounted执行顺序

created与mounted的执行顺序

最近在工作中发现created 里面的代码不一定比mounted中的代码先执行，下面的代码打印结果是什么呢？

export default {

  created() {

    console.log(1)

    this.printNum()

    console.log(3)

  },

  mounted() {

    console.log(4)

  },

 methods: {

    printNum() {

      setTimeout(() => {

        console.log(2)

      }, 100)

    }

  }

}

结果是：1 3 2 4 ？

我们知道浏览器的事件执行机制：先执行同步任务，异步任务放任务队列；执行同步任务，再先去为任务队列看有没有微任务，有就执行；直到微任务队列中暂时为空时，再去执行宏任务；每次执行一个宏任务前，都必须看微任务队列中又没有没执行的微任务，微任务都执行完了才执行宏任务

详细执行情况：1 先执行同步任务，碰到异步任务会先放到任务队列中；2 任务队列中又有宏任务队列和微任务队列，执行完同步任务后，先执行任务队列中的微任务；3 这个过程中可能产生新的宏任务和微任务，又会放到宏任务和微任务队列； 4 当目前这轮为任务队列为空的之后，就会执行宏任务队列中的任务；5 过程中也可能会产生新的微任务，产生了新的微任务，就暂停下一个宏任务执行，必须解决好新的微任务，再执行宏任务

上面代码的打印结果：

所以并不是mounted要等到created中所有的代码执行结束后才执行
后来查看资料才知道，他们的执行顺序是：created中的同步任务–mounted中的同步任务–created中的异步任务–mounted中的同步任务
这里异步的执行也遵循微任务与宏任务的执行顺序

如果只是比较他们的执行顺序的话，不用考虑太多created与mounted,他们可以理解为将created与mounted放在一起，只是created放在上面，mounted放下面的代码顺序，然后按正常执行顺序执行