快捷導(dǎo)航

Vue生命周期實(shí)例分析總結(jié)

更新時(shí)間：2022年10月03日 11:27:11 作者：月光曬了很涼快

Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期

1. 概述

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載實(shí)例到 DOM、在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，給予用戶機(jī)會(huì)在一些特定的場(chǎng)景下添加他們自己的代碼。

簡(jiǎn)單來說，生命周期鉤子函數(shù)就是一堆回調(diào)函數(shù)，在我們創(chuàng)建實(shí)例時(shí)，這些回調(diào)函數(shù)按順序執(zhí)行。

2. 頁面鉤子函數(shù)

名稱	作用
beforeCreate	在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前被調(diào)用。此時(shí) data 和 methods 以及頁面的DOM結(jié)構(gòu)都沒有初始化，什么都做不了，執(zhí)行1次
created	在實(shí)例創(chuàng)建完成后被立即調(diào)用，此時(shí)data 和 methods 已經(jīng)可以使用，但是頁面還沒有渲染出來，執(zhí)行1次，用this對(duì)象
beforeMount	在掛載開始之前被調(diào)用，此時(shí)頁面上還看不到真實(shí)數(shù)據(jù)，只是一個(gè)模板頁面而已，執(zhí)行1次
mounted	el被新創(chuàng)建的vm.$el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。數(shù)據(jù)已經(jīng)真實(shí)渲染到頁面上在這個(gè)鉤子函數(shù)里面，可以進(jìn)行數(shù)據(jù)請(qǐng)求等，執(zhí)行1次
beforeUpdate	數(shù)據(jù)更新時(shí)調(diào)用，頁面上數(shù)據(jù)還是舊的 n次
updated	由于數(shù)據(jù)更新完畢，頁面上數(shù)據(jù)已經(jīng)替換成最新的 n次
beforeDestroy	實(shí)例銷毀之前調(diào)用，執(zhí)行1次
destroyed	實(shí)例銷毀后調(diào)用，執(zhí)行1次
activated	keep-alive 組件激活時(shí)調(diào)用
deactivated	keep-alive 組件停用時(shí)調(diào)用
errorCaptured	當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用

3. 生命周期函數(shù)

下面我們用代碼實(shí)現(xiàn)以下生命周期函數(shù)的執(zhí)行順序：

<div id="app">
    <input type="text" v-model="username">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        // 初始化階段生命周期  -- 它只都只執(zhí)行1次
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
            setTimeout(() => {
                // 銷毀
                this.$destroy()
            }, 2000);
            this.timer = setInterval(() => {
                console.log(111);
            }, 1000);
        },
        // 更新階段生命周期，它們會(huì)執(zhí)行N次
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        // 銷毀階段  只執(zhí)行1次
        beforeDestroy() {
            clearInterval(this.timer)
            console.log('beforeDestroy');
        },
        destroyed() {
            console.log('destroyed');
        }
    })
</script>