Vue中的生命周期詳細解讀

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

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

前言

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

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

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

一、生命周期圖解

二、八個重要階段

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

在組件實例初始化完成之后立即調用。

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

會在實例初始化完成、props 解析之后、 data() 和 computed 等選項處理之前立即調用。

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

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

在組件實例處理完所有與狀態(tài)相關的選項后調用。

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

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

3.beforeMount（掛載前）

在組件被掛載之前調用。

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

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

這個鉤子在服務端渲染時不會被調用。

4.mounted（掛載完成）

在組件被掛載之后調用。

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

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

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

這個鉤子通常用于執(zhí)行需要訪問組件所渲染的 DOM 樹相關的副作用，或是在服務端渲染應用中用于確保 DOM 相關代碼僅在客戶端被調用。

5.beforeUpdate（修改前）

在組件即將因為一個響應式狀態(tài)變更而更新其 DOM 樹之前調用。

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

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

6.updated（更新后）

在組件因為一個響應式狀態(tài)變更而更新其 DOM 樹之后調用。

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

父組件的更新鉤子將在其子組件的更新鉤子之后調用。

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

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

7.beforeDestroy（銷毀前）

在實例銷毀之前調用，實例仍然完全可用，

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

8.destroyed（銷毀后）

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

三、代碼演示

<!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("點擊按鈕-----");
          },
        },
        //鉤子函數(shù),生命周期，在beforeCreate這個階段，
        //現(xiàn)在屬性msg數(shù)據(jù)還沒有綁定到實例對象vm上，所以數(shù)據(jù)不能輸出來
        //鉤子函數(shù)在new Vue()之后執(zhí)行 Vue內部給實例添加了一些屬性(data)和方法(methods)
        //鉤子函數(shù)在data和methods之前執(zhí)行
        beforeCreate() {
          //屬性或方法聲明了，但沒有和實例綁定
          console.log(
            "beforeCreated函數(shù)執(zhí)行了,---但此時獲取不到實例內的屬性和方法",
            this.msg
          ); //輸出：undefined
        },
        //生命周期，在created這個階段屬性msg數(shù)據(jù)綁定到vm實例對象上
        //data和methods之后執(zhí)行
        created() {
          //屬性和方法綁定到實例上，可以通過實例進行調用
          console.log(
            "created執(zhí)行了,---此時可以獲取data和methods中的變量值",
            this.msg
          ); //輸出：'hello
        },
        /* 2.掛載 */
        //虛擬dom掛載成真實dom之前,不可以操作dom
        //使用場景，預處理data,不會觸發(fā)update鉤子函數(shù)
        beforeMount() {
          console.log(
            "beforeMount執(zhí)行了,---但此時獲取不到真實的DOM節(jié)點",
            "掛載之前"
          );
          console.log(document.getElementById("app"));
        },
        //虛擬dom掛載完畢變成真實dom,此處可以可以操作dom節(jié)點
        mounted() {
          console.log("mounted執(zhí)行了,---此時可以獲取到真實的DOM", "掛載后");
          console.log(document.getElementById("app"));
        },
        /*2.更新*/
        //更新前
        beforeUpdate() {
          console.log(document.querySelectorAll("#My>li"));
          console.log(
            "beforeUpdate函數(shù)執(zhí)行了,---此時獲取不到更新的真實DOM",
            this.msg
          );
        },
        //更新后
        //場景：獲取到更新的真實DOM節(jié)點
        updated() {
          console.log(document.querySelectorAll("#My>div"));
          console.log(
            "update函數(shù)執(zhí)行了,---此時可以獲取到更新的真實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>

您可能感興趣的文章: