Vue3 版本的生命周期和 Vue2 比有了些變化，所以我先站在一個(gè)初學(xué)者的角度（沒(méi)有學(xué)過(guò) Vue2 版本的新手），從新講一下 Vue3.x 的生命周期，等你完全理解之后，我們?cè)賮?lái)和 Vue2.x 的生命周期作一個(gè)對(duì)比。

什么是生命周期

Vue 是組件化編程，從一個(gè)組件誕生到消亡，會(huì)經(jīng)歷很多過(guò)程，這些過(guò)程就叫做生命周期。

來(lái)個(gè)比喻，生命周期和人從出生到入土是一樣的。有少年時(shí)期、有青年時(shí)期、有中年時(shí)期、有老年時(shí)期。每個(gè)時(shí)期都應(yīng)該有不同的任務(wù)，可以作不同的事。
當(dāng)你理解了什么是生命周期，你還了解一個(gè)概念“鉤子函數(shù)”。

鉤子函數(shù)： 伴隨著生命周期，給用戶使用的函數(shù)，操控生命周期，主要是操控鉤子函數(shù)。
Vue3 的生命周期比較多，我們需要一個(gè)個(gè)給大家講。

• setup() :開(kāi)始創(chuàng)建組件之前，在beforeCreate和created之前執(zhí)行。創(chuàng)建的是data和method
• onBeforeMount() : 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。
• onMounted() : 組件掛載完成后執(zhí)行的函數(shù)。
• onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù)。
• onUpdated(): 組件更新完成之后執(zhí)行的函數(shù)。
• onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù)。
• onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù)
• onActivated(): 被包含在<keep-alive>中的組件，會(huì)多出兩個(gè)生命周期鉤子函數(shù)。被激活時(shí)執(zhí)行。
• onDeactivated(): 比如從 A 組件，切換到 B 組件，A 組件消失時(shí)執(zhí)行。
• onErrorCaptured(): 當(dāng)捕獲一個(gè)來(lái)自子孫組件的異常時(shí)激活鉤子函數(shù)（以后用到再講，不好展現(xiàn)）。

注：使用<keep-alive>組件會(huì)將數(shù)據(jù)保留在內(nèi)存中，比如我們不想每次看到一個(gè)頁(yè)面都重新加載數(shù)據(jù)，就可以使用<keep-alive>組件解決。

<template>
<div>
</div>
</template>

<script lang="ts">
import {
 onMounted,
 onBeforeMount,
 onBeforeUpdate,
 onUpdated,
} from "vue";
interface DaraProps {
 girls: string[];
 selectGirl: string;
 selectGirlFun: (index: number) => void;
}

export default {
 name: "Home",
 setup() {
   console.log("1-開(kāi)始創(chuàng)建組件-----setup()");
 
   onBeforeMount(() => {
     console.log("2-組件掛載到頁(yè)面之前執(zhí)行-----onBeforeMount()");
   });

   onMounted(() => {
     console.log("3-組件掛載到頁(yè)面之后執(zhí)行-----onMounted()");
   });

   onBeforeUpdate(() => {
     console.log("4-組件更新之前-----onBeforeUpdate()");
   });

   onUpdated(() => {
     console.log("5-組件更新之后-----onUpdated()");
   });
 },
};
</script>

寫完后可以到瀏覽器看一下效果，效果和你想象的應(yīng)該是一樣的。

1 - 開(kāi)始創(chuàng)建組件---- - setup();
2 - 組件掛載到頁(yè)面之前執(zhí)行---- - onBeforeMount();
3 - 組件掛載到頁(yè)面之后執(zhí)行---- - onMounted();
4 - 組件更新之前---- - onBeforeUpdate();
5 - 組件更新之后---- - onUpdated();

你這時(shí)候一定會(huì)有個(gè)疑問(wèn)，那Vue2.X版本的生命周期函數(shù)還可以使用嗎?答案是肯定的。

你可以在setup()函數(shù)之后編寫Vue2的生命周期函數(shù)，代碼如下：

beforeCreate() {
  console.log("1-組件創(chuàng)建之前-----beforeCreate()");
},
beforeMount() {
  console.log("2-組件掛載到頁(yè)面之前執(zhí)行-----BeforeMount()");
},
mounted() {
  console.log("3-組件掛載到頁(yè)面之后執(zhí)行-----Mounted()");
},
beforeUpdate() {
  console.log("4-組件更新之前-----BeforeUpdate()");
},
updated() {
  console.log("5-組件更新之后-----Updated()");
},

這時(shí)候可以看到，原來(lái)的生命周期也是完全可以使用。

Vue2.x 和 Vue3.x 生命周期對(duì)比

你也許會(huì)問(wèn)，那我到底是使用Vue2.x還是Vue3.x的生命周期鉤子函數(shù)？其實(shí)這個(gè)無(wú)所謂，但是不愿混用，如果你用 setup 這種Vue3的生命周期函數(shù)，就不要再使用Vue2的了。為了你更好的掌握，我作了一個(gè)函數(shù)對(duì)比：

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

通過(guò)這樣對(duì)比，可以很容易的看出 vue3 的鉤子函數(shù)基本是再 vue2 的基礎(chǔ)上加了一個(gè)on,但也有兩個(gè)鉤子函數(shù)發(fā)生了變化。

• BeforeDestroy變成了onBeforeUnmount
• destroyed變成了onUnmounted

尤大神的介紹是mount比Destroy更形象，也和beforeMount相對(duì)應(yīng)。