帶你一文了解Vue生命週期勾點

2022-06-11 22:00:06

前言

和其他框架一樣，Vue 有許多生命週期勾點，它們允許將程式碼附加到在建立或使用 Vue 應用程式時發生的特定事件，如當元件載入時、當元件被新增到 DOM 時或者當某些東西被刪除時。

Vue 有很多生命週期勾點，令人困惑的是每個勾點的含義或作用。在本指南中，將介紹每個生命週期掛鉤的作用以及如何使用它們。

生命週期勾點

Vue 在生命週期勾點方面有兩種正規化。一種是 Vue3 中引入的組合式API（Composition API），另一種是Vue2 中選項式API（Options API），它是定義 Vue 元件的原型模式。在本指南中，將從選項式API（Options API）開始，然後以此為基礎來展示組合式API（Composition API）中的工作原理。

選項式API（Options API）

選項式API（Options API）是 Vue2 的正規化，如下程式碼所示：

export default {
    name: "DevPoint",
    data() {
        return {
            phoneNumber: "13566666666",
        };
    },
    mounted() {},
};

生命週期流程圖

要了解每個生命週期掛鉤何時觸發，下圖描述了每個生命週期掛鉤何時觸發。

執行生命週期掛鉤

要使用選項式API（Options API）執行任何生命週期掛鉤，可以將其新增到 Javascript 原型中。例如，如果使用 beforeCreate()，在檢測到新元件後觸發的第一個勾點，可以像這樣新增它：

export default {
    name: "DevPoint",
    data() {
        return {
            someData: "20220609",
        };
    },
    mounted() {},
};

上面已經展示了不同勾點發生的時機，接下來介紹各個勾點各自做了什麼，具體什麼情況下觸發。

beforeCreate()

在元件初始化時呼叫，data() 和 computed 屬性此時不可用。它對於呼叫不操作元件資料的 API 非常有用。如果 data() 在這個勾點裡面更新，一旦選項式API（Options API）載入完，更新將會將會丟失，變得無效。

created()

在範例處理完所有狀態操作後呼叫，可以存取響應式資料、computed 屬性、methods 和 watch。$el 是 Vue 儲存元件 HTML 的變數，在這個勾點中還不可用，因為此時還沒有建立 DOM 元素。如果需要觸發 API 等不操作DOM元素的操作或者更新 data()則可以在這裡進行。

beforeMount()

這個勾點在渲染髮生之前會被執行。模板已編譯，因此它儲存在記憶體中，但尚未附加到頁面，尚未建立任何 DOM 元素，因此 $el 在這個階段仍然不可用。

mounted()

元件已安裝並顯示在頁面上， $el 可被正常使用，在此階段可以從 Vue 存取和操作 DOM。這隻會在所有子元件完全安裝後觸發。當想在 DOM 載入後對其執行某些操作時，使用它很有用，比如可能更改其中的特定元素。

beforeUpdate()

有時，會通過在watch 中更新資料或通過使用者互動來更改 Vue 元件中的資料。當更改 data() 或導致元件重新渲染時，將觸發更新事件。在DOM重新渲染髮生之前，beforeUpdate() 將立即觸發。在此事件之後，元件將重新渲染並使用最新資料進行更新。可以使用這個勾點來存取 DOM 的當前狀態，甚至可以更新 data() 。

updated()

觸發更新後，並且 DOM 已更新以最新資料重新渲染後，updated() 將觸發。這是在重新渲染後立即發生。現在，如果存取$el DOM 內容或其他任何有關 DOM 內容的內容，它將顯示新的、重新渲染後的版本。如果有父元件，updated() 則首先呼叫子元件，然後呼叫父 updated() 掛鉤。

beforeUnmount()

如果一個元件被移除，那麼它就會被解除安裝。在元件被完全移除之前，beforeUnmount() 觸發。此事件仍然可以存取 DOM 元素以及與元件有關的任何其他內容。這在刪除事件中很有用，例如，可以使用此事件通知伺服器使用者已刪除表中的節點。如果需要使用它們，仍然可以存取 this.$el，以及 data() 、methods 和 watch。

unmount()

一旦完全刪除，unmount() 事件就會觸發。這可用於清理其他資料或事件偵聽器或定時器，以讓知道該元件不再存在於頁面上。如果需要使用它們，仍然可以存取存取 this.$el，以及 data() 、methods 和 watch。

組合式API（Composition API）中的生命週期勾點

如果習慣使用選項式API（Options API），上面的勾點會很有意義。如果主要使用 Vue 3，則需要習慣使用組合式API（Composition API）的風格。組合式API（Composition API）是選項式API（Options API）的補充，但使用勾點的方式略有不同。

setup() 替換 created() 和 beforeCreated()

在組合式API（Composition API）中，created() 和 beforeCreated() 不可存取。被替換為 setup() ，在 created() 和 beforeCreated() 實現的邏輯完全可以遷移到 setup() 中。

勾點可以與 setup() 一起使用

Hooks 可以與 setup() 一起使用，如下：

export default {
    name: "DevPoint",
    data() {
        return {
            someData: "20220609",
        };
    },
    setup() {
        console.log("setup");
    },
    mounted() {
        console.log(this.$el);
    },
};

但是，可能會看到這樣做的另一種方式是使用組合式 API 函數在 setup() 函數中定義掛鉤，如果需要這樣做，勾點的命名會略有不同：

beforeMount() 改為 onBeforeMount()
mounted() 改為 onMounted()
beforeUpdate() 改為 onBeforeUpdate()
updated() 改為 onUpdated()
beforeUnmount() 改為 onBeforeUnmount()
unmounted() 改為 onUnmounted()

這些函數的作用與前面介紹描述的完全相同，但呼叫方式略有不同。所有這些勾點都必須在 setup() 函數或設定指令碼中呼叫。例如，必須在 setup 函數中執行勾點，如下所示：

export default {
    setup() {
        // 所有勾點的邏輯程式碼在這裡
    },
};

或者如下：

<script setup>
// 所有勾點的邏輯程式碼在這裡
</script>

因此，如果想使用這種方法呼叫勾點，大概程式碼如下：

<script>
export default {
    setup() {
        // 所有勾點邏輯
        onBeforeMount(() => {
            //  beforeMount() 邏輯
        });
        onBeforeUpdate(() => {
            // beforeUpdate() 邏輯
        });
    },
};
</script>