使用過Vue的大家，對于生命周期一定都很熟悉，在官方文檔一開始，就給我們介紹了Vue的生命周期有哪些，是怎么樣的順序。這個難不倒大家。

但如果是問當組件嵌套時，父子組件的生命周期函數觸發的順序是什么樣的？你是不是會有一絲絲不確定呢?

如果有的話，就讓我們一起動動手來確認下這個簡單的問題吧。

首先，一個Vue實例/組件的生命周期中的8個關鍵階段：

beforeCreate：在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。

created：在實例創建完成后被立即調用。在這一步，實例已完成數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。

beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。

mounted：實例被掛載后調用，這時 el 被新創建的 vm.$el 替換了。

beforeUpdate：數據更新時調用，發生在虛擬DOM打補丁之前。

updated：虛擬 DOM 重新渲染和打補丁之后。

beforeDestory：實例銷毀之前調用。在這一步，實例仍然完全可用。

destoryed：實例銷毀后調用。對應 Vue 實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀。
我們也可以再看一下 官網的生命周期圖示回想一下。

針對上面的8個生命周期，我們可以將其分為三個階段，分別為：創建掛載階段、更新階段和銷毀階段。

下面就讓我們依次來確認下當組件嵌套時，這三個階段生命周期的觸發順序是怎么樣的？

示例代碼：https://codesandbox.io/s/qiantaozujianshengmingzhouqi-7e5q7

1. 創建掛載階段

如果你仔細閱讀各階段的描述，你應該能想到當組件嵌套時，子組件的創建掛載是在父組件掛載的時候才觸發的。下面我們來確認下。

打開示例代碼，默認情況下是沒有渲染組件的。這個時候我們點擊：勾選顯示組件，你會看到如下頁面，父子組件會渲染出來。

此時，可以看到console中輸出了父子組件的觸發順序。

順序如下：

可以看到子組件的創建掛載階段確實是在父組件的掛載階段完成的，開始于父組件的beforeMount之后，結束于父組件的mounted之前。

2. 更新階段

同樣的，更新階段比較簡單，有了上面的經驗，基本可以確定子組件的更新過程是在父組件的beforeUpdate和updated之間。

修改頁面中的父組件的名稱，可以看到輸出的生命周期觸發順序確實如預期，如下：

3. 銷毀階段

說到這里，銷毀階段應該沒啥好說的了，子組件的銷毀是在父組件的beforeDestroy和destroyed之間完成的。

點擊示例代碼，取消勾選顯示組件，可以看到如下順序：

現在讓我們在官方的生命周期圖示上做一點拓展，加上組件嵌套時的生命周期。如下圖所示：

下面我們繼續。上面我們通過簡單直觀的方式確認了下組件嵌套時，生命周期函數觸發的順序是什么樣的。然而縝密的你可能已經發現了，上面的示例都是以同步組件為例的。當組件為異步組件時會發生什么變化呢？

4. 當組件是異步組件時

前面，歪馬留了一手，官方文檔上有指出如下內容：“mounted 不會保證所有的子組件也都一起被掛載”、“updated 不會保證所有的子組件也都一起被重繪。”。

之所以官網會給出如此說明，是因為當組件為異步組件時，生命周期的觸發順序會和上面多有不同。

異步子組件的創建和掛載

話不多說，我們先把組件改成異步的，看看結果。從demo中找到src/components/OuterBox.vue，將InnerBox改為異步加載。如：

// 異步組件 InnerBox: () => import("./InnerBox")

然后我們重新勾選顯示頁面，可以發現，當子組件為異步，子組件的創建掛載階段發生在父組件的beforeUpdate和updated之間。

我們稍微翻一下Vue的源碼，可以看到當組件是異步組件時，會執行異步組件的工廠函數，在組件加載完成之后，會強制更新所有包含該組件的父組件。

異步函數的工廠函數就是上面的() => import("./InnerBox")，官方文檔指出，只要是一個返回值是Promise的函數就行。返回值也可以是更復雜的帶有加載狀態的對象，可以參見文檔。

父組件更新時同理，如果存在新的異步加載組件，則不會等待。

好了，今天要分享的內容就是這么簡單，就是想動動手確認下組件嵌套時，父子組件生命周期的執行順序是什么。

作者：very_much
鏈接：https://www.jianshu.com/p/9d404683bbf4
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

總結

以上是生活随笔為你收集整理的Vue组件嵌套时生命周期函数触发顺序是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

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