Vue生命周期詳解

Posted on by

這篇博客將會從下面四個常見的應用詮釋組件的生命周期，以及各個生命周期應該幹什麼事

  • 單組件的生命周期
  • 父子組件的生命周期
  • 兄弟組件的生命周期
  • 宏mixin的生命周期

生命周期：Vue 實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期，各個階段有相對應的事件鉤子

1. 生命周期鉤子函數

下面這張圖是vue生命周期各個階段的執行情況：

註意：

  • created階段的ajax請求與mounted請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處於白屏狀態

  • mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染

完畢，可以用 vm.$nextTick

vue2.0之後主動調用$destroy()不會移除dom節點，作者不推薦直接destroy這種做法，如果實在需要這樣用可以在這個生命周期鉤子中手動移除dom節點

2. 單個組件的生命周期

現根據實際代碼執行情況分析：

<template>
    <div>
        <h3>單組件</h3>
        <el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">銷毀</el-button>
    </div>
</template>

export default {
    data() {
        return {
            dataVar: 1
        }
    },

    beforeCreate() {
        this.compName = 'single'
        console.log(`--${this.compName}--beforeCreate`)
    },

    created() {
        console.log(`--${this.compName}--created`)
    },

    beforeMount() {
        console.log(`--${this.compName}--beforeMount`)
    },

    mounted() {
        console.log(`--${this.compName}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${this.compName}--beforeUpdate`)
    },

    updated() {
        console.log(`--${this.compName}--updated`)
    },

    beforeDestroy() {
        console.log(`--${this.compName}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${this.compName}--destroyed`)
    },

    methods: {
        handleDestroy() {
            this.$destroy()
        }
    }
}

初始化組件時，打印：

當data中的值變化時，打印：

當組件銷毀時，打印：

從打印結果可以看出:

  • 初始化組件時，僅執行瞭beforeCreate/Created/beforeMount/mounted四個鉤子函數

  • 當改變data中定義的變量（響應式變量）時，會執行beforeUpdate/updated鉤子函數

  • 當切換組件（當前組件未緩存）時，會執行beforeDestory/destroyed鉤子函數

  • 初始化和銷毀時的生命鉤子函數均隻會執行一次，beforeUpdate/updated可多次執行

3. 父子組件的生命周期

將單組件作為基礎組件（由於props在beforeCreate()中未初始化），需要做如下更改：

props: {
    compName: {
        type: String,
        default: 'single'
    }
},

beforeCreate() {
    // this.compName = 'single'
    // console.log(`--${this.compName}--beforeCreate`)

    console.log(` --data未初始化--beforeCreate`)
},

父組件代碼如下：

<template>
    <div class="complex">
        <h3>復雜組件</h3>
        <lifecycle-single compName="child"></lifecycle-single>
    </div>
</template>


const COMPONENT_NAME = 'complex'

import LifecycleSingle from './LifeCycleSingle'

export default {

    beforeCreate() {
        console.log(`--${COMPONENT_NAME}--beforeCreate`)
    },

    created() {
        console.log(`--${COMPONENT_NAME}--created`)
    },

    beforeMount() {
        console.log(`--${COMPONENT_NAME}--beforeMount`)
    },

    mounted() {
        console.log(`--${COMPONENT_NAME}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${COMPONENT_NAME}--beforeUpdate`)
    },

    updated() {
        console.log(`--${COMPONENT_NAME}--updated`)
    },

    beforeDestroy() {
        console.log(`--${COMPONENT_NAME}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${COMPONENT_NAME}--destroyed`)
    },

    components: {
        LifecycleSingle
    }
}

初始化組件時，打印：

當子組件data中的值變化時，打印：

當父組件data中的值變化時，打印：

當props改變時，打印：

當子組件銷毀時，打印：

當父組件銷毀時，打印：

從打印結果可以看出:

  • 僅當子組件完成掛載後，父組件才會掛載

  • 當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）

  • 父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的（可實踐）

  • 銷毀父組件時，先將子組件銷毀後才會銷毀父組件

4. 兄弟組件的生命周期

在上面的基礎上，復雜組件做如下更改

<template>
    <div class="complex">
        <h3>復雜組件</h3>
        <lifecycle-single compName="cihld1"></lifecycle-single>
        <lifecycle-single compName="child2"></lifecycle-single>
        <el-button @click="dataVar += 1">complex更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">complex銷毀</el-button>
    </div>
</template>

初始化組件時，打印：

當child1更新和銷毀時，打印：

當child2更新和銷毀時，打印：

當父組件銷毀時，打印

從打印結果可以看出:

  • 組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行

  • 當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

5. 宏mixin的生命周期

在上面的基礎上，添加一個mixin.js文件，內容如下：

const COMPONENT_NAME = 'lifecycleMixin'
 
export default {
    name: COMPONENT_NAME,

    beforeCreate() {
        console.log(`--${COMPONENT_NAME}--beforeCreate`)
    },

    created() {
        console.log(`--${COMPONENT_NAME}--created`)
    },

    beforeMount() {
        console.log(`--${COMPONENT_NAME}--beforeMount`)
    },

    mounted() {
        console.log(`--${COMPONENT_NAME}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${COMPONENT_NAME}--beforeUpdate`)
    },

    updated() {
        console.log(`--${COMPONENT_NAME}--updated`)
    },

    beforeDestroy() {
        console.log(`--${COMPONENT_NAME}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${COMPONENT_NAME}--destroyed`)
    }
}

同樣的，復雜組件做如下更改：

import lifecycleMixin from './mixin'

export default {

    mixins: [lifecycleMixin],
    // ...
}

組件初始化時，打印：

組件銷毀時，打印：

從打印結果可以看出:

  • mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行

到此這篇關於Vue生命周期的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：