Vue生命周期鉤子如何運(yùn)行

這篇文章主要講解了“Vue生命周期鉤子如何運(yùn)行”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue生命周期鉤子如何運(yùn)行”吧！

生命周期鉤子

Vue 在生命周期鉤子方面有兩種范式。一種是 Vue3 中引入的組合式API（Composition API），另一種是Vue2 中選項(xiàng)式API（Options API） ，它是定義 Vue 組件的原型模式。在本指南中，將從選項(xiàng)式API（Options API）開始，然后以此為基礎(chǔ)來展示組合式API（Composition API）中的工作原理。

選項(xiàng)式API（Options API）

選項(xiàng)式API（Options API）是 Vue2 的范式，如下代碼所示：

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

生命周期流程圖

要了解每個(gè)生命周期掛鉤何時(shí)觸發(fā)，下圖描述了每個(gè)生命周期掛鉤何時(shí)觸發(fā)。

運(yùn)行生命周期掛鉤

要使用選項(xiàng)式API（Options API）運(yùn)行任何生命周期掛鉤，可以將其添加到 Javascript 原型中。例如，如果使用 beforeCreate()，在檢測到新組件后觸發(fā)的第一個(gè)鉤子，可以像這樣添加它：

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

上面已經(jīng)展示了不同鉤子發(fā)生的時(shí)機(jī)，接下來介紹各個(gè)鉤子各自做了什么，具體什么情況下觸發(fā)。

beforeCreate()

在組件初始化時(shí)調(diào)用，data() 和 computed 屬性此時(shí)不可用。它對于調(diào)用不操作組件數(shù)據(jù)的 API 非常有用。如果 data() 在這個(gè)鉤子里面更新，一旦選項(xiàng)式API（Options API）加載完，更新將會(huì)將會(huì)丟失，變得無效。

created()

在實(shí)例處理完所有狀態(tài)操作后調(diào)用，可以訪問響應(yīng)式數(shù)據(jù)、computed 屬性、methods 和 watch。$el 是 Vue 存儲(chǔ)組件 HTML 的變量，在這個(gè)鉤子中還不可用，因?yàn)榇藭r(shí)還沒有創(chuàng)建 DOM 元素。如果需要觸發(fā) API 等不操作DOM元素的操作或者更新 data()則可以在這里進(jìn)行。

beforeMount()

這個(gè)鉤子在渲染發(fā)生之前會(huì)被執(zhí)行。模板已編譯，因此它存儲(chǔ)在內(nèi)存中，但尚未附加到頁面，尚未創(chuàng)建任何 DOM 元素，因此 $el 在這個(gè)階段仍然不可用。

mounted()

組件已安裝并顯示在頁面上， $el 可被正常使用，在此階段可以從 Vue 訪問和操作 DOM。這只會(huì)在所有子組件完全安裝后觸發(fā)。當(dāng)想在 DOM 加載后對其執(zhí)行某些操作時(shí)，使用它很有用，比如可能更改其中的特定元素。

beforeUpdate()

有時(shí)，會(huì)通過在watch 中更新數(shù)據(jù)或通過用戶交互來更改 Vue 組件中的數(shù)據(jù)。當(dāng)更改 data() 或?qū)е陆M件重新渲染時(shí)，將觸發(fā)更新事件。在DOM重新渲染發(fā)生之前，beforeUpdate() 將立即觸發(fā)。在此事件之后，組件將重新渲染并使用最新數(shù)據(jù)進(jìn)行更新?？梢允褂眠@個(gè)鉤子來訪問 DOM 的當(dāng)前狀態(tài)，甚至可以更新 data() 。

updated()

觸發(fā)更新后，并且 DOM 已更新以最新數(shù)據(jù)重新渲染后，updated() 將觸發(fā)。這是在重新渲染后立即發(fā)生?，F(xiàn)在，如果訪問$el DOM 內(nèi)容或其他任何有關(guān) DOM 內(nèi)容的內(nèi)容，它將顯示新的、重新渲染后的版本。如果有父組件，updated() 則首先調(diào)用子組件，然后調(diào)用父 updated() 掛鉤。

beforeUnmount()

如果一個(gè)組件被移除，那么它就會(huì)被卸載。在組件被完全移除之前，beforeUnmount() 觸發(fā)。此事件仍然可以訪問 DOM 元素以及與組件有關(guān)的任何其他內(nèi)容。這在刪除事件中很有用，例如，可以使用此事件通知服務(wù)器用戶已刪除表中的節(jié)點(diǎn)。如果需要使用它們，仍然可以訪問 this.$el，以及 data() 、methods 和 watch。

unmount()

一旦完全刪除，unmount() 事件就會(huì)觸發(fā)。這可用于清理其他數(shù)據(jù)或事件偵聽器或定時(shí)器，以讓知道該組件不再存在于頁面上。如果需要使用它們，仍然可以訪問訪問 this.$el，以及 data() 、methods 和 watch。

組合式API（Composition API）中的生命周期鉤子

如果習(xí)慣使用選項(xiàng)式API（Options API），上面的鉤子會(huì)很有意義。如果主要使用 Vue 3，則需要習(xí)慣使用組合式API（Composition API）的風(fēng)格。組合式API（Composition API）是 選項(xiàng)式API（Options API） 的補(bǔ)充，但使用鉤子的方式略有不同。

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

在組合式API（Composition API）中，created() 和 beforeCreated() 不可訪問。被替換為 setup() ，在 created() 和 beforeCreated() 實(shí)現(xiàn)的邏輯完全可以遷移到 setup() 中。

鉤子可以與 setup() 一起使用

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

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

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

• beforeMount() 改為 onBeforeMount()

• mounted() 改為 onMounted()

• beforeUpdate() 改為 onBeforeUpdate()

• updated() 改為 onUpdated()

• beforeUnmount() 改為 onBeforeUnmount()

• unmounted() 改為 onUnmounted()

這些函數(shù)的作用與前面介紹描述的完全相同，但調(diào)用方式略有不同。所有這些鉤子都必須在 setup() 函數(shù)或設(shè)置腳本中調(diào)用。例如，必須在 setup 函數(shù)中運(yùn)行鉤子，如下所示：

export default {
    setup() {
        // 所有鉤子的邏輯代碼在這里
    },
};

或者如下：

<script setup>
// 所有鉤子的邏輯代碼在這里
</script>

因此，如果想使用這種方法調(diào)用鉤子，大概代碼如下：

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

感謝各位的閱讀，以上就是“Vue生命周期鉤子如何運(yùn)行”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue生命周期鉤子如何運(yùn)行這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！