如何理解Vue生命周期和鉤子函數(shù)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何理解Vue生命周期和鉤子函數(shù)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1. vue生命周期

一組件從 創(chuàng)建 到 銷毀 的整個過程就是生命周期

Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

2.鉤子函數(shù)

Vue 框架內(nèi)置函數(shù)，隨著組件的生命周期階段，自動執(zhí)行,特定的時間點，執(zhí)行特定的操作

2.1 分為4大階段8個方法:

 下圖展示了實例的生命周期:

2.2 初始化階段

1.new Vue() – Vue實例化(組件也是一個小的Vue實例)

2.Init Events & Lifecycle – 初始化事件和生命周期函數(shù)

3.beforeCreate – 生命周期鉤子函數(shù)被執(zhí)行

4.Init injections&reactivity – Vue內(nèi)部添加data和methods等

5.created – 生命周期鉤子函數(shù)被執(zhí)行, 實例創(chuàng)建

6.接下來是編譯模板階段 –開始分析

7.Has el option? – 是否有el選項 – 檢查要掛到哪里

沒有. 調(diào)用$mount()方法

有, 繼續(xù)檢查template選項

<script>
export default {
    data(){
        return {
            msg: "hello, Vue"
        }
    },
    // 一. 初始化
    // new Vue()以后, vue內(nèi)部給實例對象添加了一些屬性和方法, data和methods初始化"之前"
    beforeCreate(){
        console.log("beforeCreate -- 執(zhí)行");
        console.log(this.msg); // undefined
    },
    // data和methods初始化以后
    // 場景: 網(wǎng)絡(luò)請求, 注冊全局事件
    created(){
        console.log("created -- 執(zhí)行");
        console.log(this.msg); // hello, Vue
 
        this.timer = setInterval(() => {
            console.log("哈哈哈");
        }, 1000)
    }
}
</script>

2.3 掛載階段

1.template選項檢查

有 - 編譯template返回render渲染函數(shù)

無 – 編譯el選項對應(yīng)標(biāo)簽作為template(要渲染的模板)

2.虛擬DOM掛載成真實DOM之前

3.beforeMount – 生命周期鉤子函數(shù)被執(zhí)行

4.Create … – 把虛擬DOM和渲染的數(shù)據(jù)一并掛到真實DOM上

5.真實DOM掛載完畢

6.mounted – 生命周期鉤子函數(shù)被執(zhí)行

<template>
  <div>
      <p>學(xué)習(xí)生命周期 - 看控制臺打印</p>
      <p id="myP">{{ msg }}</p>
  </div>
</template>
 
<script>
export default {
    // ...省略其他代碼
    
    // 二. 掛載
    // 真實DOM掛載之前
    // 場景: 預(yù)處理data, 不會觸發(fā)updated鉤子函數(shù)
    beforeMount(){
        console.log("beforeMount -- 執(zhí)行");
        console.log(document.getElementById("myP")); // null
 
        this.msg = "重新值"
    },
    // 真實DOM掛載以后
    // 場景: 掛載后真實DOM
    mounted(){
        console.log("mounted -- 執(zhí)行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>

2.4 更新階段

1.當(dāng)data里數(shù)據(jù)改變, 更新DOM之前

2.beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行

3.Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM

4.updated – 生命周期鉤子函數(shù)被執(zhí)行

5.當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個循環(huán)

<template>
  <div>
      <p>學(xué)習(xí)生命周期 - 看控制臺打印</p>
      <p id="myP">{{ msg }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">點擊末尾加值</button>
  </div>
</template>
 
<script>
export default {
    data(){
        return {
            msg: "hello, Vue",
            arr: [5, 8, 2, 1]
        }
    },
  
    // 三. 更新
    // 前提: data數(shù)據(jù)改變才執(zhí)行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate -- 執(zhí)行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之后
    // 場景: 獲取更新后的真實DOM
    updated(){
        console.log("updated -- 執(zhí)行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>

2.5 銷毀階段

1.當(dāng)$destroy()被調(diào)用 – 比如組件DOM被移除(例v-if)

2.beforeDestroy – 生命周期鉤子函數(shù)被執(zhí)行

3.拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器

4.實例銷毀后, 最后觸發(fā)一個鉤子函數(shù)

5.destroyed – 生命周期鉤子函數(shù)被執(zhí)行

<script>
export default {
    // ...省略其他代碼
    
    // 四. 銷毀
    // 前提: v-if="false" 銷毀Vue實例
    // 場景: 移除全局事件, 移除當(dāng)前組件, 計時器, 定時器, eventBus移除事件$off方法
    beforeDestroy(){
        // console.log('beforeDestroy -- 執(zhí)行');
        clearInterval(this.timer)
    },
    destroyed(){
        // console.log("destroyed -- 執(zhí)行");
    }
}
</script>

最后:

面試題:

1.vue生命周期總共分為幾個階段？

(1) beforeCreate

在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。

(2) created

在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)， 屬性和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。

(3) beforeMount

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

(4) mounted

el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。

(5) beforeUpdate

數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進行。

(6) updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。

(7) activated

keep-alive 組件激活時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

(8) deactivated

keep-alive 組件停用時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

(9) beforeDestroy

實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

(10) destroyed

Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

(11) errorCaptured（2.5.0+ 新增）

當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。

2.第一次加載頁面會觸發(fā)哪幾個鉤子函數(shù)？

beforeCreate, created, beforeMount, mounted 這幾個鉤子函數(shù)

上述就是小編為大家分享的如何理解Vue生命周期和鉤子函數(shù)了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。