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

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

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

組件生命周期

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

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

創(chuàng)建階段

beforeCreate階段

我們在初始化事件和生命周期函數(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)建階段的第一個生命周期
    beforeCreate(){
        console.log(this.info); //props
        console.log(this.message); //data
        this.show() //methods
    },
}
</script>

因為不能使用 props/data/methods 但是我調(diào)用了，所有控制臺報錯。

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)建階段的第二個生命周期函數(shù)
    created(){
        console.log(this.info);
        console.log(this.message);
        this.show()
    }
}
</script>

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

<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','請求的接口')
            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)渲染到瀏覽器中。此時瀏覽器中還沒有當(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)，成功渲染到了瀏覽器之中，此時瀏覽器中已經(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完成模板解析并把初識的真實DOM元素放在頁面后(掛載完畢)調(diào)用 mounted。

<template>
  <div>
    <h2 :style="{opacity}">歡迎學(xué)習(xí)Vue</h2>
  </div>
</template>
<script>
export default {
    data(){
        return {
            opacity:1
        }
    },
    mounted(){
        setInterval(()=>{
            //我們在使用箭頭函數(shù)時，this的指向mounted自動幫我們設(shè)置好是 vm 了
            this.opacity-=0.01
            if(this.opacity <= 0) this.opacity = 1
        },6)
    },
}
</script>

運(yùn)行階段

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

beforeUpdate階段

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

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

updated階段

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

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+='~'">點擊修改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); //打印整個文本，但出現(xiàn)了我們修改后的值，說明頁面被重新渲染
    }
}
</script>

銷毀階段

完全銷毀一個實例。清理它(vm)與其它實例的連接，接綁它的全部指令及事件監(jiān)聽器。

beforeDestroy階段

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

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

destroyed階段

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

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

<template>
  <div>
    <h2 :style="{opacity}">歡迎學(xué)習(xí)Vue</h2>
    <button @click="opacity = 1">透明度設(shè)置為1</button>
    <button @click="stop">點我停止變化</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即將被銷毀');
    }
}
</script>
<style lang="less" scoped>
    div{
        // background-color: #f00;
    }
</style>