快捷導(dǎo)航

Vue中的生命周期詳細(xì)解讀

更新時(shí)間：2023年08月17日 09:47:29 作者：飄飄~

這篇文章主要介紹了Vue中的生命周期詳細(xì)解讀,每個(gè) Vue 組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實(shí)例到 DOM，以及在數(shù)據(jù)改變時(shí)更新 DOM,需要的朋友可以參考下

前言

每個(gè) Vue 組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實(shí)例到 DOM，以及在數(shù)據(jù)改變時(shí)更新 DOM。

說明：Vue生命周期是學(xué)習(xí)Vue非常重要的知識(shí)點(diǎn)，其中生命周期鉤子在程序開發(fā)中有著十分重要的地位。

在此過程中，它也會(huì)運(yùn)行被稱為生命周期鉤子的函數(shù)，讓開發(fā)者有機(jī)會(huì)在特定階段運(yùn)行自己的代碼。

一、生命周期圖解

二、八個(gè)重要階段

1.beforeCreate( 創(chuàng)建前 )

在組件實(shí)例初始化完成之后立即調(diào)用。

interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

會(huì)在實(shí)例初始化完成、props 解析之后、 data() 和 computed 等選項(xiàng)處理之前立即調(diào)用。

注意，組合式 API 中的 setup() 鉤子會(huì)在所有選項(xiàng)式 API 鉤子之前調(diào)用， beforeCreate() 也不例外。

2.created ( 創(chuàng)建后）

在組件實(shí)例處理完所有與狀態(tài)相關(guān)的選項(xiàng)后調(diào)用。

interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，以下內(nèi)容已經(jīng)設(shè)置完成：響應(yīng)式數(shù)據(jù)、計(jì)算屬性、方法和偵聽器。然而，此時(shí)掛載階段還未開始，因此 $el 屬性仍不可用。

3.beforeMount（掛載前）

在組件被掛載之前調(diào)用。

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件已經(jīng)完成了其響應(yīng)式狀態(tài)的設(shè)置，但還沒有創(chuàng)建 DOM 節(jié)點(diǎn)。它即將首次執(zhí)行 DOM 渲染過程。

這個(gè)鉤子在服務(wù)端渲染時(shí)不會(huì)被調(diào)用。

4.mounted（掛載完成）

在組件被掛載之后調(diào)用。

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

組件在以下情況下被視為已掛載：

所有同步子組件都已經(jīng)被掛載。(不包含異步組件或 <Suspense> 樹內(nèi)的組件)
其自身的 DOM 樹已經(jīng)創(chuàng)建完成并插入了父容器中。注意僅當(dāng)根容器在文檔中時(shí)，才可以保證組件 DOM 樹也在文檔中。

這個(gè)鉤子通常用于執(zhí)行需要訪問組件所渲染的 DOM 樹相關(guān)的副作用，或是在服務(wù)端渲染應(yīng)用中用于確保 DOM 相關(guān)代碼僅在客戶端被調(diào)用。

5.beforeUpdate（修改前）

在組件即將因?yàn)橐粋€(gè)響應(yīng)式狀態(tài)變更而更新其 DOM 樹之前調(diào)用。

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

這個(gè)鉤子可以用來在 Vue 更新 DOM 之前訪問 DOM 狀態(tài)。在這個(gè)鉤子中更改狀態(tài)也是安全的。

6.updated（更新后）

在組件因?yàn)橐粋€(gè)響應(yīng)式狀態(tài)變更而更新其 DOM 樹之后調(diào)用。

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

父組件的更新鉤子將在其子組件的更新鉤子之后調(diào)用。

這個(gè)鉤子會(huì)在組件的任意 DOM 更新后被調(diào)用，這些更新可能是由不同的狀態(tài)變更導(dǎo)致的。

如果你需要在某個(gè)特定的狀態(tài)更改后訪問更新后的 DOM，請(qǐng)使用 nextTick() 作為替代。

7.beforeDestroy（銷毀前）

在實(shí)例銷毀之前調(diào)用，實(shí)例仍然完全可用，

這一步還可以用this來獲取實(shí)例，一般在這一步做一些重置的操作，比如清除掉組件中的定時(shí)器和監(jiān)聽的dom事件

8.destroyed（銷毀后）

在實(shí)例銷毀之后調(diào)用，調(diào)用后，所以的事件監(jiān)聽器會(huì)被移出，所有的子實(shí)例也會(huì)被銷毀，該鉤子在服務(wù)器端渲染期間不被調(diào)用

三、代碼演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的數(shù)據(jù)模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <button @click="test">按鈕</button>
      <ul id="My">
        <li>111</li>
      </ul>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          //   time: new Date(),
          msg: true,
        },
        methods: {
          test() {
            console.log("點(diǎn)擊按鈕-----");
          },
        },
        //鉤子函數(shù),生命周期，在beforeCreate這個(gè)階段，
        //現(xiàn)在屬性msg數(shù)據(jù)還沒有綁定到實(shí)例對(duì)象vm上，所以數(shù)據(jù)不能輸出來
        //鉤子函數(shù)在new Vue()之后執(zhí)行 Vue內(nèi)部給實(shí)例添加了一些屬性(data)和方法(methods)
        //鉤子函數(shù)在data和methods之前執(zhí)行
        beforeCreate() {
          //屬性或方法聲明了，但沒有和實(shí)例綁定
          console.log(
            "beforeCreated函數(shù)執(zhí)行了,---但此時(shí)獲取不到實(shí)例內(nèi)的屬性和方法",
            this.msg
          ); //輸出：undefined
        },
        //生命周期，在created這個(gè)階段屬性msg數(shù)據(jù)綁定到vm實(shí)例對(duì)象上
        //data和methods之后執(zhí)行
        created() {
          //屬性和方法綁定到實(shí)例上，可以通過實(shí)例進(jìn)行調(diào)用
          console.log(
            "created執(zhí)行了,---此時(shí)可以獲取data和methods中的變量值",
            this.msg
          ); //輸出：'hello
        },
        /* 2.掛載 */
        //虛擬dom掛載成真實(shí)dom之前,不可以操作dom
        //使用場(chǎng)景，預(yù)處理data,不會(huì)觸發(fā)update鉤子函數(shù)
        beforeMount() {
          console.log(
            "beforeMount執(zhí)行了,---但此時(shí)獲取不到真實(shí)的DOM節(jié)點(diǎn)",
            "掛載之前"
          );
          console.log(document.getElementById("app"));
        },
        //虛擬dom掛載完畢變成真實(shí)dom,此處可以可以操作dom節(jié)點(diǎn)
        mounted() {
          console.log("mounted執(zhí)行了,---此時(shí)可以獲取到真實(shí)的DOM", "掛載后");
          console.log(document.getElementById("app"));
        },
        /*2.更新*/
        //更新前
        beforeUpdate() {
          console.log(document.querySelectorAll("#My>li"));
          console.log(
            "beforeUpdate函數(shù)執(zhí)行了,---此時(shí)獲取不到更新的真實(shí)DOM",
            this.msg
          );
        },
        //更新后
        //場(chǎng)景：獲取到更新的真實(shí)DOM節(jié)點(diǎn)
        updated() {
          console.log(document.querySelectorAll("#My>div"));
          console.log(
            "update函數(shù)執(zhí)行了,---此時(shí)可以獲取到更新的真實(shí)DOM",
            this.msg
          );
        },
        /*銷毀*/
        //銷毀監(jiān)聽
        beforeDestroy() {
          console.log("beforeDestroy函數(shù)執(zhí)行了", this.msg);
        },
        destroyed() {
          console.log("destroy函數(shù)執(zhí)行了", this.msg);
        },
      });
      setInterval(() => {
        vm.$destroy();
      }, 5000);
    </script>
  </body>
</html>

您可能感興趣的文章: