Vue組件生命周期三個(gè)階段全面總結(jié)講解
組件生命周期
生命周期(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)行階段就是用戶(hù)與組件產(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>
1）銷(xiāo)毀后借助Vue開(kāi)發(fā)者工具看不到任何信息。
2）銷(xiāo)毀后自定義事件會(huì)失效，但原生的DOM事件依然有效
3）一般不會(huì)在beforeDestroy操作數(shù)據(jù)，因?yàn)榧词共僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了
總結(jié)
生命周期：
1）又稱(chēng)：生命周期回調(diào)函數(shù)、生命周期函數(shù)、生命周期鉤子。
2）含義：vue在關(guān)鍵時(shí)刻幫助我們調(diào)用一些特殊名稱(chēng)的函數(shù)。
3）生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫(xiě)的。
4）生命周期函數(shù)中的this指向是 vm 或 組件實(shí)例對(duì)象。
常用的生命周期鉤子：
1）mounted：發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器、綁定自定義事件、訂閱消息等(初始化操作)
2）beforeDestroy：清除定時(shí)器、綁定自定義事件、取消訂閱消息等(收尾工作)
下面是實(shí)例生命周期的圖表。你現(xiàn)在并不需要完全理解圖中的所有內(nèi)容，但以后它將是一個(gè)有用的參考。
到此這篇關(guān)于Vue組件生命周期三個(gè)階段全面總結(jié)講解的文章就介紹到這了,更多相關(guān)Vue組件生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
解決webpack-bundle-analyzer的問(wèn)題大坑
這篇文章主要介紹了解決webpack-bundle-analyzer的問(wèn)題大坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了Vue?中v-model的完整用法及原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue3如何配置多級(jí)代理問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令
本篇文章主要介紹了詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue項(xiàng)目中配置pug解析支持的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
在Vue組件中,data函數(shù)用于定義組件的數(shù)據(jù),本文主要介紹了Vue組件data函數(shù)的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02