Vue的生命周期鉤子是在Vue組件創(chuàng)建、掛載、更新、銷毀等過程中自動(dòng)調(diào)用的特殊函數(shù)。這些鉤子允許開發(fā)者在組件的不同階段執(zhí)行特定的邏輯。Vue 2 和 Vue 3 在生命周期鉤子上有一些差異，主要是因?yàn)閂ue 3引入了Composition API和更現(xiàn)代的JavaScript特性。

Vue 2 的生命周期鉤子

在Vue 2中，生命周期鉤子通過選項(xiàng)對(duì)象中的特定鍵來定義，如created、mounted、updated、destroyed等。

export default {data() {return {// ...};},created() {// 組件實(shí)例被創(chuàng)建后調(diào)用},mounted() {// 組件被掛載到DOM后調(diào)用},updated() {// 組件的DOM更新后調(diào)用},beforeDestroy() {// 組件實(shí)例銷毀之前調(diào)用},destroyed() {// 組件實(shí)例銷毀后調(diào)用},// ...
};

Vue 3 的生命周期鉤子

在Vue 3中，雖然大部分的生命周期鉤子名稱沒有改變（除了beforeDestroy被重命名為beforeUnmount，destroyed被重命名為unmounted），但是引入了Composition API，使得你可以更加靈活地組織和復(fù)用邏輯。

選項(xiàng)式 API（與Vue 2類似）

如果你仍然使用Vue 3的選項(xiàng)式API，那么生命周期鉤子的使用方式與Vue 2相同。

組合式 API

但是，如果你使用組合式API（setup函數(shù)），你需要使用onXXX函數(shù)來注冊(cè)生命周期鉤子。

import { onMounted, onUpdated, onUnmounted } from 'vue';export default {setup() {onMounted(() => {// 組件被掛載到DOM后調(diào)用});onUpdated(() => {// 組件的DOM更新后調(diào)用});onUnmounted(() => {// 組件實(shí)例銷毀后調(diào)用});// ...},// ...
};

實(shí)現(xiàn)原理

Vue的生命周期鉤子是通過Vue實(shí)例內(nèi)部的生命周期管理邏輯來實(shí)現(xiàn)的。當(dāng)Vue實(shí)例或組件被創(chuàng)建、掛載、更新或銷毀時(shí)，Vue會(huì)檢查相應(yīng)的鉤子函數(shù)是否存在，并依次調(diào)用它們。這些鉤子函數(shù)是由開發(fā)者在組件選項(xiàng)中定義的，或者在setup函數(shù)中使用onXXX函數(shù)注冊(cè)的。

在Vue 3中，由于引入了Composition API和Proxy來實(shí)現(xiàn)響應(yīng)式系統(tǒng)，內(nèi)部實(shí)現(xiàn)可能有所變化，但基本的生命周期管理邏輯仍然相同。Vue會(huì)跟蹤組件的狀態(tài)變化，并在適當(dāng)?shù)臅r(shí)機(jī)觸發(fā)相應(yīng)的生命周期鉤子。