執(zhí)行順序：父組件先創(chuàng)建，然后子組件創(chuàng)建；子組件先掛載，然后父組件掛載，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。

在單一組件中，鉤子的執(zhí)行順序是beforeCreate-> created -> mounted->… ->destroyed，但當父子組件嵌套時，父組件和子組件各擁有各自獨立的鉤子函數(shù)，這些父子組件的這些鉤子是如何交融執(zhí)行，且執(zhí)行順序又是怎樣的呢?

父子組件生命周期執(zhí)行順序

組件，分別在他們的鉤子函數(shù)中打印日志，觀察執(zhí)行順序。得到的結(jié)果如圖所示，父組件先創(chuàng)建，然后子組件創(chuàng)建；子組件先掛載，然后父組件掛載。

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子組件掛載完成后，父組件還未掛載。所以組件數(shù)據(jù)回顯的時候，在父組件mounted中獲取api的數(shù)據(jù)，子組件的mounted是拿不到的。

仔細看看父子組件生命周期鉤子的執(zhí)行順序，會發(fā)現(xiàn)created這個鉤子是按照從外內(nèi)順序執(zhí)行，所以父子組件傳遞接口數(shù)據(jù)的解決方案是：

在created中發(fā)起請求獲取數(shù)據(jù)，依次在子組件的created或者mounted中會接收到這個數(shù)據(jù)。

加載渲染過程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

銷毀過程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常用鉤子簡易版

父create->子created->子mounted->父mounted

補充單一組件鉤子執(zhí)行順序

activated, deactivated 是組件keep-alive時獨有的鉤子

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

總結(jié)

beforeCreate執(zhí)行時：data和el均未初始化，值為undefined

created執(zhí)行時：Vue 實例觀察的數(shù)據(jù)對象data已經(jīng)配置好，已經(jīng)可以得到data的值，但Vue 實例使用的根 DOM 元素el還未初始化

beforeMount執(zhí)行時：data和el均已經(jīng)初始化，但此時el并沒有渲染進數(shù)據(jù)，el的值為“虛擬”的元素節(jié)點

mounted執(zhí)行時：此時el已經(jīng)渲染完成并掛載到實例上

beforeUpdate和updated觸發(fā)時，el中的數(shù)據(jù)都已經(jīng)渲染完成，但只有updated鉤子被調(diào)用時候，組件dom才被更新。

在created鉤子中可以對data數(shù)據(jù)進行操作，這個時候可以進行數(shù)據(jù)請求將返回的數(shù)據(jù)賦給data

在mounted鉤子對掛載的dom進行操作，此時，DOM已經(jīng)被渲染到頁面上。

雖然updated函數(shù)會在數(shù)據(jù)變化時被觸發(fā)，但卻不能準確的判斷是那個屬性值被改變，所以在實際情況中用computed或watch函數(shù)來監(jiān)聽屬性的變化，并做一些其他的操作。

所有的生命周期鉤子自動綁定 this 上下文到實例中，所以不能使用箭頭函數(shù)來定義一個生命周期方法 (例如 created: () => this.fetchTodos())，會導致this指向父級。

在使用vue-router時有時需要使用來緩存組件狀態(tài)，這個時候created鉤子就不會被重復調(diào)用了，如果我們的子組件需要在每次加載或切換狀態(tài)的時候進行某些操作，可以使用activated鉤子觸發(fā)。

父子組件的鉤子并不會等待請求返回，請求是異步的，VUE設計也不能因為請求沒有響應而不執(zhí)行后面的鉤子。所以，我們必須通過v-if來控制子組件鉤子的執(zhí)行時機.

注意：在父組件傳遞接口的數(shù)據(jù)給子組件時，一定要在子組件標簽上加上v-if="傳遞的接口數(shù)據(jù)"

在父組件的created中發(fā)請求獲取數(shù)據(jù)，通過prop傳遞給子組件。子組件在created或者mounted中拿父組件傳遞過來的數(shù)據(jù) 這樣處理是有問題的。
在父組件調(diào)用接口傳遞數(shù)據(jù)給子組件時，接口響應顯然是異步的。這會導致無論你在父組件哪個鉤子發(fā)請求，在子組件哪個鉤子接收數(shù)據(jù)。都是取不到的。當子組件的mounted都執(zhí)行完之后，此時可能父組件的請求才返回數(shù)據(jù)。會導致，從父組件傳遞給子組件的數(shù)據(jù)是undefined。

解決方法1：

在渲染子組件的時候加上一個條件，data1是父組件調(diào)用接口返回的數(shù)據(jù)。當有數(shù)據(jù)的時候在去渲染子組件。這樣就會形成天然的阻塞。在父組件的created中的請求返回數(shù)據(jù)后，才會執(zhí)行子組件的created，mounted。最后執(zhí)行父組件的mounted。

<div class="test">
    <children v-if="data1" :data="data1" ></children>
</div>

解決方法2：

在子組件中 watch 監(jiān)聽，父組件獲取到值，這個值就會變化，自然是可以監(jiān)聽到的

watch:{
    data:{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.data = newVal
          this.data = newVal.url ? newVal.url : ''
        })
      }
    },
}

從父組件點擊調(diào)用接口并顯示子組件，子組件拿到數(shù)據(jù)并監(jiān)聽在watch中調(diào)用方法并顯示。

以下為子組件，data1是從子組件傳遞過來的數(shù)據(jù)。在created，mounted中都拿不到父組件調(diào)用接口返回的data1。 只能watch監(jiān)聽data1。并調(diào)用方法渲染子組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-483974.html

props:['data1'],
watch:{
    data1:{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.data1 = newVal
          this.showData1(this.data1)
        })
      }
    },
}