Vue生命周期和鉤子函數的詳解與經典面試題

1. vue生命周期

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

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

2.鉤子函數

Vue 框架內置函數,隨著組件的生命周期階段,自動執行,特定的時間點,執行特定的操作

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

階段 方法名 方法名
初始化 beforeCreated created
掛載 beforeMount Mounted
更新 beforeUpdate updated
銷毀 beforeDestroy destroyed

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

2.2 初始化階段

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

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

3.beforeCreate – 生命周期鉤子函數被執行

4.Init injections&reactivity – Vue內部添加data和methods等

5.created – 生命周期鉤子函數被執行, 實例創建

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

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

沒有. 調用$mount()方法

有, 繼續檢查template選項

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

2.3 掛載階段

1.template選項檢查

有 – 編譯template返回render渲染函數

無 – 編譯el選項對應標簽作為template(要渲染的模板)

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

3.beforeMount – 生命周期鉤子函數被執行

4.Create … – 把虛擬DOM和渲染的數據一並掛到真實DOM上

5.真實DOM掛載完畢

6.mounted – 生命周期鉤子函數被執行

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

2.4 更新階段

1.當data裡數據改變, 更新DOM之前

2.beforeUpdate – 生命周期鉤子函數被執行

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

4.updated – 生命周期鉤子函數被執行

5.當有data數據改變 – 重復這個循環

<template>
  <div>
      <p>學習生命周期 - 看控制臺打印</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數據改變才執行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate -- 執行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之後
    // 場景: 獲取更新後的真實DOM
    updated(){
        console.log("updated -- 執行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>

2.5 銷毀階段

1.當$destroy()被調用 – 比如組件DOM被移除(例v-if)

2.beforeDestroy – 生命周期鉤子函數被執行

3.拆卸數據監視器、子組件和事件偵聽器

4.實例銷毀後, 最後觸發一個鉤子函數

5.destroyed – 生命周期鉤子函數被執行

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

最後:

面試題:

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

(1) beforeCreate

在實例初始化之後,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。

(2) created

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

(3) beforeMount

在掛載開始之前被調用:相關的 render 函數首次被調用。

(4) mounted

el 被新創建的 vm.$el 替換,並掛載到實例上去之後調用該鉤子。如果 root 實例掛載瞭一個文檔內元素,當 mounted 被調用時 vm.$el 也在文檔內。

(5) beforeUpdate

數據更新時調用,發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問現有的 DOM,比如手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不被調用,因為隻有初次渲染會在服務端進行。

(6) updated

由於數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之後會調用該鉤子。

(7) activated

keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

(8) deactivated

keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。

(9) beforeDestroy

實例銷毀之前調用。在這一步,實例仍然完全可用。該鉤子在服務器端渲染期間不被調用。

(10) destroyed

Vue 實例銷毀後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

(11) errorCaptured(2.5.0+ 新增)

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

2.第一次加載頁面會觸發哪幾個鉤子函數?

beforeCreate, created, beforeMount, mounted 這幾個鉤子函數

總結

到此這篇關於Vue生命周期和鉤子函數的文章就介紹到這瞭,更多相關Vue生命周期和鉤子函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: