Vue組件生命周期三個(gè)階段全面總結(jié)講解

更新時(shí)間：2022年11月23日 14:55:03 作者：亦世凡華、

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

組件生命周期

生命周期(Life Cycle)是指一個(gè)組件從創(chuàng)建 -> 運(yùn)行 -> 銷(xiāo)毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。

生命周期函數(shù)：是由 vue 框架提供的內(nèi)置函數(shù)，會(huì)伴隨著組件的生命周期，自動(dòng)按次序執(zhí)行。

創(chuàng)建階段

beforeCreate階段

我們?cè)诔跏蓟录蜕芷诤瘮?shù)時(shí)，組件的 props/data/methods尚未被創(chuàng)建，都處于不可用狀態(tài)。

<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test'
        }
    },
    methods:{
        show(){
            console.log('調(diào)用了 Test 組件的 show 方法');
        }
    },
    // 創(chuàng)建階段的第一個(gè)生命周期
    beforeCreate(){
        console.log(this.info); //props
        console.log(this.message); //data
        this.show() //methods
    },
}
</script>

因?yàn)椴荒苁褂?props/data/methods 但是我調(diào)用了，所有控制臺(tái)報(bào)錯(cuò)。

created階段

我們已經(jīng)初始化好 props、data、methods了，組件的 props/data/methods已創(chuàng)建好。都處于可用狀態(tài)，但是組件的模板結(jié)構(gòu)尚未完成！

<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test'
        }
    },
    methods:{
        show(){
            console.log('調(diào)用了 Test 組件的 show 方法');
        }
    },
    // 創(chuàng)建階段的第二個(gè)生命周期函數(shù)
    created(){
        console.log(this.info);
        console.log(this.message);
        this.show()
    }
}
</script>

created生命周期函數(shù)非常常用，在日常項(xiàng)目開(kāi)發(fā)中經(jīng)常在它里面調(diào)用 methods 中的方法，請(qǐng)求服務(wù)器的數(shù)據(jù)，并且把請(qǐng)求到的數(shù)據(jù)，轉(zhuǎn)存到 data 中，供 template 模板渲染的時(shí)候使用！

<template>
  <div>
    <h2>test組件--{{nums.length}}</h2>
  </div>
</template>
<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test',
            nums:[]
        }
    },
    methods:{
        show(){
            console.log('調(diào)用了 Test 組件的 show 方法');
        },
        initlist(){
            const xhr = new XMLHttpRequest()
            xhr.addEventListener('load',()=>{
                const result = JSON.parse(xhr.responseText)
                console.log(result);
                this.nums = result.data
            })
            xhr.open('GET','請(qǐng)求的接口')
            xhr.send()
        }
    },
    created(){
        this.initlist()
    }
}
</script>
<style lang="less" scoped>
    div{
        background-color: #f00;
    }
</style>

beforeMount階段

基于數(shù)據(jù)和模板，在內(nèi)存中編譯生成HTML結(jié)構(gòu)。將要把內(nèi)存中編譯好的HTML結(jié)構(gòu)渲染到瀏覽器中。此時(shí)瀏覽器中還沒(méi)有當(dāng)前組件的DOM結(jié)構(gòu)。

<template>
  <div>
    <h2 id="myid">test組件--{{nums.length}}</h2>
  </div>
</template>
<script>
export default {
    props:['info'],
    data(){},
    methods:{},
    beforeCreate(){}，
    created(){},
    beforeMount(){
        console.log('beforeMount');
        const dom = document.querySelector('#myid')
        console.log(dom);
    }
}
</script>

mounted階段

用內(nèi)存中編譯生成的HTML結(jié)構(gòu)替換掉el屬性指定的DOM元素，已經(jīng)把內(nèi)存中的HTML結(jié)構(gòu)，成功渲染到了瀏覽器之中，此時(shí)瀏覽器中已經(jīng)包含了當(dāng)前組件的DOM結(jié)構(gòu)。

<template>
  <div>
    <h2 id="myid">test組件--{{nums.length}}</h2>
  </div>
</template>
<script>
export default {
    mounted(){
        const dom = document.querySelector('#myid')
        console.log(dom);
    }
}
</script>

vue完成模板解析并把初識(shí)的真實(shí)DOM元素放在頁(yè)面后(掛載完畢)調(diào)用 mounted。

<template>
  <div>
    <h2 :style="{opacity}">歡迎學(xué)習(xí)Vue</h2>
  </div>
</template>
<script>
export default {
    data(){
        return {
            opacity:1
        }
    },
    mounted(){
        setInterval(()=>{
            //我們?cè)谑褂眉^函數(shù)時(shí)，this的指向mounted自動(dòng)幫我們?cè)O(shè)置好是 vm 了
            this.opacity-=0.01
            if(this.opacity <= 0) this.opacity = 1
        },6)
    },
}
</script>

運(yùn)行階段

所謂運(yùn)行階段就是用戶與組件產(chǎn)生交互

beforeUpdate階段

這個(gè)函數(shù)的觸發(fā)的必要前提是，我們修改了 data 里面的數(shù)據(jù)。將要（注意：僅僅是將要，還沒(méi)有呢）根據(jù)變化過(guò)后最新的數(shù)據(jù)，重新渲染組件的模板結(jié)構(gòu)。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+='~'">點(diǎn)擊修改message值</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            message:'hello test',
        }
    },
    beforeUpdate(){
        console.log('beforeUpdate'); //說(shuō)明：點(diǎn)擊按鈕修改data值才能觸發(fā)這個(gè)函數(shù)
        console.log(this.message); //打印修改后的值
        const dom = document.querySelector('#myid')
        console.log(dom.innerHTML); //打印整個(gè)文本，但并沒(méi)有出現(xiàn)我們修改后的值，說(shuō)明頁(yè)面并沒(méi)有重新渲染
    }
}
</script>

updated階段

已經(jīng)根據(jù)最新的數(shù)據(jù)，完成了組件的DOM結(jié)構(gòu)的重新渲染。注意：當(dāng)數(shù)據(jù)變化之后，為了能操作到最新的 DOM 結(jié)構(gòu)，必須把代碼寫(xiě)到 updated 生命周期函數(shù)中。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+='~'">點(diǎn)擊修改message值</button>
  </div>
</template>
<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test',
        }
    },
    updated(){
        console.log('updated'); 
        console.log(this.message); //打印修改后的值
        const dom = document.querySelector('#myid')
        console.log(dom.innerHTML); //打印整個(gè)文本，但出現(xiàn)了我們修改后的值，說(shuō)明頁(yè)面被重新渲染
    }
}
</script>

銷(xiāo)毀階段

完全銷(xiāo)毀一個(gè)實(shí)例。清理它(vm)與其它實(shí)例的連接，接綁它的全部指令及事件監(jiān)聽(tīng)器。

beforeDestroy階段

將要銷(xiāo)毀此組件，此時(shí)尚未銷(xiāo)毀，組件還處于正常工作狀態(tài)。在這階段一般做一些首尾工作。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+='~'">點(diǎn)擊修改message值</button>
  </div>
</template>
<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test',
        }
    },
    beforeDestroy(){
        console.log('beforeDestroy');
    }
}

destroyed階段

銷(xiāo)毀當(dāng)前組件的數(shù)據(jù)偵聽(tīng) 器、子組件、事件監(jiān)聽(tīng)等，組件已經(jīng)被銷(xiāo)毀，此組件在瀏覽器中對(duì)應(yīng)的DOM結(jié)構(gòu)已被完全移除！

直接暴力的將vm干掉，頁(yè)面就不能再進(jìn)行交互。設(shè)置透明的按鈕也就作廢了。

<template>
  <div>
    <h2 :style="{opacity}">歡迎學(xué)習(xí)Vue</h2>
    <button @click="opacity = 1">透明度設(shè)置為1</button>
    <button @click="stop">點(diǎn)我停止變化</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            opacity:1
        }
    },
    methods:{
        stop(){
            // clearInterval(this.timer)
            this.$destroy()
        }
    },
    mounted(){
        // const dom = document.querySelector('#myid')
        // console.log(dom);
        console.log('mounted',this);
        this.timer = setInterval(()=>{
            console.log('setInterval');
            this.opacity-=0.01
            if(this.opacity <= 0) this.opacity = 1
        },6)
    },
    beforeDestroy(){
        clearInterval(this.timer)
        console.log('vm即將被銷(xiāo)毀');
    }
}
</script>
<style lang="less" scoped>
    div{
        // background-color: #f00;
    }
</style>