生命周期:即在生命的某一个时刻,自动执行的函数
vue的生命周期有:
-
beforeCreate() 在实例创建之前,自动执行的函数
-
creater() 在实例创建之后,自动执行的函数
-
beforeMount() 在dom挂载之前,自动执行的函数
-
mounted() 在dom挂载完成之后,自动执行的函数 (在此之前都获取不到dom节点)
-
beforeUpdate() 在data中的数据有变化时,自动执行的函数
-
updated() 在data中的数据发生改变,页面中心渲染完成之后,自动执行的函数
-
beforeUnmount() 在实例销毁时,自动执行的函数
-
unmounted() 在实例销毁时,且dom完全销毁之后,自动执行的函数
代码提现:
<template>
<!-- 生命周期函数学习 -->
<div class="base01">
<home-back></home-back>
<div id="life">{{message}}</div>
<div class="btn" @click="bindChange">点击改变message</div>
</div>
</template>
<script>
import Back from "@/components/common/back.vue"
export default {
data(){
return {
message:'生命周期'
}
},
components:{
'home-back':Back
},
beforeCreate(){ // 在实例创建之前,自动执行的函数
console.log("beforeCreate")
console.log(document.getElementById('life'))
},
created(){ // 在实例创建之后,自动执行的函数
console.log("created")
console.log(document.getElementById('life'))
},
beforeMount(){ // 在dom挂载之前,自动执行的函数
console.log("beforeMount")
console.log(document.getElementById('life'))
},
mounted(){ // 在dom挂载完成之后,自动执行的函数
console.log("mounted")
console.log(document.getElementById('life'))
},
beforeUpdate(){ // 在data中的数据有变化时,自动执行的函数
console.log("beforeUpdate")
console.log(document.getElementById('life').innerHTML)
},
updated(){ // 在data中的数据发生改变,页面中心渲染完成之后,自动执行的函数
console.log("updated")
console.log(document.getElementById('life').innerHTML)
},
beforeUnmount() { // 在实例销毁时,自动执行的函数
console.log("updated")
},
unmounted() { // 在实例销毁时,且dom完全销毁之后,自动执行的函数
console.log("unmounted")
},
methods: {
bindChange(){
this.message = this.message=='生命周期'?"生命周期学习":"生命周期"
},
},
}
</script>
<style scoped lang="stylus">
.base01
font-size 25px
margin 40px 0 0 50px
.btn
cursor pointer
margin-top 20px
</style>