1. vue生命周期

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

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

2.鉤子函數(shù)

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

2.1 分為4大階段8個(gè)方法:

 下圖展示了實(shí)例的生命周期:

2.2 初始化階段

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

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

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

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

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

6.接下來(lái)是編譯模板階段 –開始分析

7.Has el option? – 是否有el選項(xiàng) – 檢查要掛到哪里

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

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

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

2.3 掛載階段

1.template選項(xiàng)檢查

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

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

2.虛擬DOM掛載成真實(shí)DOM之前

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

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

5.真實(shí)DOM掛載完畢

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

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

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

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

<template>
  <div>
      <p>學(xué)習(xí)生命周期 - 看控制臺(tái)打印</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)">點(diǎn)擊末尾加值</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
    },
    // 更新之后
    // 場(chǎng)景: 獲取更新后的真實(shí)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.實(shí)例銷毀后, 最后觸發(fā)一個(gè)鉤子函數(shù)

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

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

最后:

面試題:

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

(1) beforeCreate

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

(2) created

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

(3) beforeMount

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

(4) mounted

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

(5) beforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。

(6) updated

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

(7) activated

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

(8) deactivated

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

(9) beforeDestroy

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

(10) destroyed

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

(11) errorCaptured（2.5.0+ 新增）

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

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

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

總結(jié)

到此這篇關(guān)于Vue生命周期和鉤子函數(shù)的文章就介紹到這了,更多相關(guān)Vue生命周期和鉤子函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！