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放下面的代碼順序，然后按正常執行順序執行

總結

以上是生活随笔為你收集整理的created与mounted执行顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。