組件生命周期圖

組件生命周期鉤子

所有的生命周期鉤子自動綁定

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

二、生命周期鉤子：在一個組件生命周期中，會有很多特殊的時間節(jié)點，且往往會在特定的時間節(jié)點完成一定的邏輯，特殊的事件節(jié)點可以綁定鉤子

注：鉤子 - 提前為某個事件綁定方法，當滿足這個事件激活條件時，方法就會被調用 | 滿足特點條件被回調的綁定方法就稱之為鉤子

<template>
    <div class="goods">
        <Nav />
    </div>
</template>
<script>
    import Nav from "../components/Nav";
    export default {
        name: "Goods",
        components: {
            Nav,
        },
        beforeCreate() {
            console.log('該組件要被加載了')
        },
        created() {
            console.log('該組件要被加載成功了')
        },
        updated() {
            console.log('數(shù)據(jù)更新了')
        },
        destroyed() {
            console.log('該組件銷毀了')
        }
    }
</script>

1、beforeCreate

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

2、created

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

3、beforeMount

在掛載開始之前被調用

4、mounted

實例被掛載后調用，這時 el 被新創(chuàng)建的 vm.$el 替換了。 如果根實例掛載到了一個文檔內的元素上，當mounted被調用時vm.$el也在文檔內。

注意 mounted 不會保證所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以在 mounted 內部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5、beforeUpdate

數(shù)據(jù)更新時調用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。

該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行。

6、updated

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

當這個鉤子被調用時，組件 DOM 已經更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。

然而在大多數(shù)情況下，你應該避免在此期間更改狀態(tài)。如果要相應狀態(tài)改變，通常最好使用計算屬性或 watcher 取而代之。

7、activated

被 keep-alive 緩存的組件激活時調用。

該鉤子在服務器端渲染期間不被調用。

8、deactivated

被 keep-alive 緩存的組件停用時調用。

該鉤子在服務器端渲染期間不被調用。

9、beforeDestroy

實例銷毀之前調用。在這一步，實例仍然完全可用。

該鉤子在服務器端渲染期間不被調用。

10、destroyed

實例銷毀后調用。該鉤子被調用后，對應 Vue 實例的所有指令都被解綁，所有的事件監(jiān)聽器被移除，所有的子實例也都被銷毀。

該鉤子在服務器端渲染期間不被調用。

11、errorCaptured

2.5.0+ 新增
當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。

此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播

以上就是vue組件生命周期鉤子使用示例詳解的詳細內容，更多關于vue組件生命周期鉤子的資料請關注腳本之家其它相關文章！