Vue的生命周期函數(shù)
生命周期函數(shù)又稱為:生命周期鉤子函數(shù)扫夜。
組件掛載壹蔓、以及組件更新、組件銷毀、的時(shí)候觸發(fā)的一系列的方法 這些方法就叫做生命周期函數(shù)错沽。
那么我們創(chuàng)建一個(gè)組件來(lái)演示一下：
<template>
<!-- 所有的內(nèi)容要被根節(jié)點(diǎn)包含起來(lái) -->
<div id="life">
生命周期函數(shù)的演示 ---{{msg}}
<br>
<button @click="setMsg()">執(zhí)行方法改變msg</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'msg'
}
},
methods:{
setMsg(){
this.msg="我是改變后的數(shù)據(jù)"
}
},
beforeCreate(){
console.log('實(shí)例剛剛被創(chuàng)建1');
},
created(){
console.log('實(shí)例已經(jīng)創(chuàng)建完成2');
},
beforeMount(){
console.log('模板編譯之前3');
},
mounted(){ /*請(qǐng)求數(shù)據(jù)，操作dom , 放在這個(gè)里面 mounted*/
console.log('模板編譯完成4');
},
beforeUpdate(){
console.log('數(shù)據(jù)更新之前');
},
updated(){
console.log('數(shù)據(jù)更新完畢');
},
beforeDestroy(){ /*頁(yè)面銷毀的時(shí)候要保存一些數(shù)據(jù)，就可以監(jiān)聽這個(gè)銷毀的生命周期函數(shù)*/
console.log('實(shí)例銷毀之前');
},
destroyed(){
console.log('實(shí)例銷毀完成');
}
}
</script>
預(yù)覽圖如下所示：
image.png
image.png
