前言

Vue的生命周期和JS異步都是有很多文章的知識點，我之前也是一知半解，基本夠用。

但是直到我在開發的時候真的遇到了問題，才發現如果不把這些知識點融匯到一起，很難解決實際問題。

我甚至覺得這是我離尤雨溪最近的一次。

生命周期

生命周期就是LifeCycle，生命周期在Vue中更為直觀，它很好的描述了一個Vue項目從誕生到銷毀的全部過程。

我還是引用Vue的官方文檔：

因為本文只涉及到了Create/Mount兩個生命周期，所以我也只對這兩個周期進行敘述。

beforeCreate

這是第一個生命周期函數，指的是實例在被完全創建之前，此時為一個空的實例對象，只有一些默認的生命周期函數和默認的事件，并且此時data和methods中的內容還沒有被初始化，也就不能被調用。

created

此時data，methods都已經被初始化好，可以被調用。如果你想在渲染時先獲取到數據，可以考慮把axios語句放在這里。

這種說法是比較常見的一種，但是考慮到axios的異步，我很懷疑放在created與mounted內是否有較大的性能差距。
而如果要獲取并且改變dom，似乎就要放在mounted中，總之這里需要更多的證據。

而在這兩個周期之間，此時Vue開始編輯模板，執行相關的邏輯，并最終在內存中生成一個編譯好的最終模板字符串，并渲染為DOM。但是還沒有掛載到真正的頁面中去。

beforeMount

此時，頁面中的元素還沒有被替換，只是之前的模板字符串。例如可以嘗試著寫一個插值，通過innerText獲取這一段，看看是{{something}}還是真正的數據。答案是前者。

接下來，就是要把已經編譯好的模板替換至頁面。

Mounted

這是實例創建期間的最后一個生命周期函數，當mounted執行完后實例就已經被完全創建完畢，此時內存中的模板字符串已經被真實的掛載到頁面中，而用戶可以看到完成渲染的頁面。

JavaScript異步

因為JavaScript是一個單線程語言，并沒有多線程，所以JS也不能同時執行很多個語句，絕大多數情況下都是順序執行語句，也因此衍生出了非常多的面試題。而如果一條語句不能夠正常執行，接下來的語句都不能再正常執行。

所以，JavaScript引入了異步這個概念，但問題是現在會更難搞懂語句的執行順序。

例如：

console

正確答案是132，而不是123。

因為設置了setTimeout，語句會在延時之后執行，即在條件符合之后才會開始執行，這就是異步執行的特點。

而在同步語句中執行異步語句，則是基于Event Loop。

這里對于操作來說不是特別重要，如果你對這個概念感興趣可以訪問：

什么是 Event Loop？ - 阮一峰的網絡日志?www.ruanyifeng.com

那么，我們還可以對這兩種語句，引出一個分類，分別是宏任務與微任務。

相同的，如果你對這個概念感興趣可以訪問：

javaScript macro-task（宏任務）與micro-task（微任務）?www.jianshu.com

在這里沒什么必要展開，這些概念別人比我解釋的更清楚，重要的是，我想引出一個結論：

JavaScript作為單線程語言，并沒有多線程的語言的語法特點，但是這也是JavaScript具有其他語言不具有的優勢的原因。

對于語句來說，在event loop中，JS會先執行一個宏任務，而如果遇到微任務，會將其放入到微任務的event list里，而不是立即執行。

當宏任務執行完畢后，JS會查看微任務的event list，并且再依此執行微任務。

所以，即使setTimeout在3之前，也不會出現等待后輸出2再輸出3的情況。

最后

至于為什么我需要把這兩個知識點單獨拉到一篇文章里分析，主要是因為下面這篇文章：

https://zhuanlan.zhihu.com/p/260523407?zhuanlan.zhihu.com

感謝：

黑馬程序員39期web前端-vue生命周期_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili?www.bilibili.comhttps://blog.csdn.net/qq_36117508/article/details/81609913?blog.csdn.net

總結

以上是生活随笔為你收集整理的js字符串替换_浅析Vue的生命周期以及JS异步的全部內容，希望文章能夠幫你解決所遇到的問題。

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