父子元件生命週期執行順序（同步元件的情況下）

更新過程

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

更新過程

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

銷燬過程

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

常用鉤子簡易版

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

補充單一元件鉤子執行順序

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

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed
11. errorCaptured

單一鉤子總結

• beforeCreate執行時：data和el均未初始化，值為undefined
• created執行時：Vue例項觀察的資料物件data已經配置好，已經可以得到data的值，但Vue例項使用的根DOM元素el還未初始化
• beforeMount執行時：data和el均已經初始化，但此時el並沒有渲染進資料，el的值為“虛擬”的元素節點
• mounted執行時：此時el已經渲染完成並掛載到例項上
• beforeUpdate和updated觸發時，el中的資料已經渲染完成，但只有updated鉤子被呼叫時候，元件dom才被更新。
• 在created鉤子中可以對data資料進行操作，這個時候可以進行資料請求將返回的資料賦給data
• 在mounted鉤子對掛載的dom進行操作，此時，DOM已經被渲染到頁面上。
• 雖然updated函式會在資料變化時被觸發，但卻不能準確的判斷是哪個屬性值被改變，所以實際情況中用computed或watch函式來監聽屬性的變化，並做一些其它的操作。
• 所有的生命週期鉤子自動繫結this上下文到例項中，所以不能使用箭頭函式來定義一個生命週期方法（例如 created:()=>this.fetchTodos()）,會導致this指向父級。
• 在使用v-router時有時需要使用keep-alive來快取元件狀態，這個時候created鉤子就不會被重複呼叫了，如果我們的子元件需要在每次載入或切換狀態的時候進行某些操作，可以使用activated鉤子呼叫。
• 父子元件的鉤子並不會等待請求返回，請求是非同步的，VUE設計也不能因為請求沒有響應而不執行後面的鉤子。所以我們必須通過v-if來控制子元件鉤子的執行時機

在父元件的created中請求獲取資料，通過prop傳遞給子元件。子元件在created或者mounted中拿父元件傳遞過來的資料這樣處理是有問題的！

在父元件呼叫介面傳遞資料給子元件時，介面響應顯然是非同步的。這會導致無論你在父元件哪個鉤子發請求，在子元件哪個鉤子接收資料。都是取不到的。當子元件的mounted都執行完之後，此時父元件的請求才返回資料。會導致，從父元件傳遞給子元件的資料是undefined。

解決方法1：

在渲染子元件的時候加上一個條件，當有資料的時候在去渲染子元件。這樣就會形成天然的阻塞。在父元件的created中的請求返回資料後，才會執行子元件的created，mounted。最後執行父元件的mounted。

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

解決方法二：

在子元件中watch監聽，父元件獲取到值，這個 值就會變化，自然可以監聽到的

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

從父元件點選呼叫介面並顯示子元件，子元件拿到資料並監聽在watch中呼叫方法並顯示

以下為子元件，data1是從子元件傳遞過來的資料。在created,mounted中都拿不到父元件呼叫介面返回的data1。只能watch監聽data1。並呼叫方法渲染子元件。

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