目錄

一. 什么是生命周期

二. 鉤子函式

1.初始化階段

在 beforeCreated 階段

在 created 階段

2. 掛載階段

在 beforeMount 階段

在 mounted 階段

3. 更新階段

更新前后：

5. 銷毀階段

銷毀前后：

三. 鉤子函式（不常用）

1. 組件激活時

未激活時(activated/deactivated)：

2. 捕獲錯誤時

當捕獲一個來自后代組件的錯誤時被呼叫（errorCaptured）：

一. 什么是生命周期

一組件從 創建 到 銷毀 的整個程序就是生命周期

每個 Vue 實體在被創建時都要經過一系列的初始化程序——例如，需要設定資料監聽、編譯模板、將實體掛載到 DOM 并在資料變化時更新 DOM 等，同時在這個程序中也會運行一些叫做生命周期鉤子的函式，這給了用戶在不同階段添加自己的代碼的機會，

二. 鉤子函式

作用: 特定的時間點，執行特定的操作

場景: 組件創建完畢后，可以在created 生命周期函式中發起Ajax 請求，從而初始化 data 資料

分類: 4大階段8個方法（總共有十一個，常用的有八個，另外三個將會在結尾簡單介紹）

1.初始化階段

在 beforeCreated 階段

vue實體的掛載元素 $el 和資料物件 data 都為 undefined，還未初始化

在 created 階段

vue實體的資料物件 data 有了，但 $el 還沒有

下面是在初始化階段的兩個鉤子的作用和執行時機：

1. new Vue() – Vue實體化(組件也是一個小的Vue實體)
2. Init Events & Lifecycle – 初始化事件和生命周期函式
3. beforeCreate – 生命周期鉤子函式被執行
4. Init injections&reactivity – Vue內部添加data和methods等
5. created – 生命周期鉤子函式被執行, 實體創建
6. 接下來是編譯模板階段 –開始分析
7. Has el option? – 是否有el選項 – 檢查要掛到哪里

   沒有. 呼叫$mount()方 ；有, 繼續檢查template選項

<script>
export default {
    data(){
        return {
            msg: "hello, Vue"
        }
    },
    // 一. 初始化
    // new Vue()以后, vue內部給實體物件添加了一些屬性和方法, data和methods初始化"之前"
    beforeCreate(){
        console.log("beforeCreate -- 執行");
        console.log(this.msg); // undefined
    },
    // data和methods初始化以后
    // 場景: 網路請求, 注冊全域事件
    created(){
        console.log("created -- 執行");
        console.log(this.msg); // hello, Vue

        this.timer = setInterval(() => {
            console.log("哈哈哈");
        }, 1000)
    }
}
</script>

2. 掛載階段

在 beforeMount 階段

vue實體的 $el 和 data 都初始化完成，但還沒有掛載虛擬的 DOM 節點，data.message還沒替換

在 mounted 階段

vue實體掛載完成，data.message 成功渲染

下面是在初始化階段的兩個鉤子的作用和執行時機：

1. template選項檢查
2. 有 - 編譯template回傳render渲染函式
3. 無 – 編譯el選項對應標簽作為template(要渲染的模板)
4. 虛擬DOM掛載成真實DOM之前
5. beforeMount – 生命周期鉤子函式被執行
6. Create … – 把虛擬DOM和渲染的資料一并掛到真實DOM上
7. 真實DOM掛載完畢
8. mounted – 生命周期鉤子函式被執行

<template>
  <div>
      <p>學習生命周期 - 看控制臺列印</p>
      <p id="myP">{{ msg }}</p>
  </div>
</template>

<script>
export default {
    // ...省略其他代碼
    
    // 二. 掛載
    // 真實DOM掛載之前
    // 場景: 預處理data, 不會觸發updated鉤子函式
    beforeMount(){
        console.log("beforeMount -- 執行");
        console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真實DOM掛載以后
    // 場景: 掛載后真實DOM
    mounted(){
        console.log("mounted -- 執行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>

3. 更新階段

更新前后：

當 data 變化時，會觸發 beforeUpdate 和 updated 方法

1. 當data里資料改變, 更新DOM之前
2. beforeUpdate – 生命周期鉤子函式被執行
3. Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM
4. updated – 生命周期鉤子函式被執行
5. 當有data資料改變 – 重復這個回圈

準備ul+li回圈, 按鈕添加元素, 觸發data改變->導致更新周期開始

<template>
  <div>
      <p>學習生命周期 - 看控制臺列印</p>
      <p id="myP">{{ msg }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">點擊末尾加值</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "hello, Vue",
            arr: [5, 8, 2, 1]
        }
    },
    // ...省略其他代碼

    // 三. 更新
    // 前提: data資料改變才執行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate -- 執行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之后
    // 場景: 獲取更新后的真實DOM
    updated(){
        console.log("updated -- 執行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>

5. 銷毀階段

銷毀前后：

在執行 destroy 方法后，對 data 的改變不會再觸發周期函式，說明此時的 vue 實體已經解除了事件監聽以及和 DOM 的系結，但是 DOM 結構依然存在

1. 當$destroy()被呼叫 – 比如組件DOM被移除(例v-if)
2. beforeDestroy – 生命周期鉤子函式被執行
3. 拆卸資料監視器、子組件和事件偵聽器
4. 實體銷毀后, 最后觸發一個鉤子函式
5. destroyed – 生命周期鉤子函式被執行

組件即將要被洗掉：

<script>
export default {
    // ...省略其他代碼
    
    // 四. 銷毀
    // 前提: v-if="false" 銷毀Vue實體
    // 場景: 移除全域事件, 移除當前組件, 計時器, 定時器, eventBus移除事件$off方法
    beforeDestroy(){
        // console.log('beforeDestroy -- 執行');
        clearInterval(this.timer)
    },
    destroyed(){
        // console.log("destroyed -- 執行");
    }
}
</script>

在 App.vue 中點擊按鈕讓組件從DOM上移除 -> 導致組件進入銷毀階段

<Life v-if="show"></Life>
<button @click="show = false">銷毀組件</button>

<script>
    data(){
        return {
            show: true
        }
    },
</script>

三. 鉤子函式（不常用）

這兩個鉤子現在已經很少有人使用了，了解一下就好

1. 組件激活時

未激活時(activated/deactivated)：

這兩個鉤子函式呢一般配合<keep-alive><keep-alive/>來使用，

通常一個組件是很大的，如果我們總是一直創建、銷毀、創建、銷毀，，，這樣很不合理，而且很浪費性能,這時候我們就可以用<keep-alive><keep-alive/>配合著兩個鉤子函式來控制組件的激活和不激活

2. 捕獲錯誤時

當捕獲一個來自后代組件的錯誤時被呼叫（errorCaptured）：

當子孫組件報錯的時候，父組件會觸發這個鉤子函式，并且會回傳三個引數， 第一個引數是 錯誤物件 ,第二個引數是 報錯的子孫組件 ,第三個引數是 報錯的子孫組件的具體哪個地方報錯，