Vue生命周期實例分析

這篇文章主要介紹“Vue生命周期實例分析”，在日常操作中，相信很多人在Vue生命周期實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue生命周期實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

1. 生命周期鉤子函數

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

注意：

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

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

完畢，可以用 vm.$nextTick

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

2. 單個組件的生命周期

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

<template>
    <div>
        <h4>單組件</h4>
        <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">
        <h4>復雜組件</h4>
        <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">
        <h4>復雜組件</h4>
        <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生命周期實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！