组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数。
生命周期函数调用的位置:
生命周期函数实现的内容:
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="life">
生命周期函数的演示 ---{{msg}}
<br>
<button @click="setMsg()">执行方法改变msg</button>
</div>
</template>
<script>
/*
生命周期函数/生命周期钩子:
*/
export default{
data(){
return{
msg:'msg'
}
},
methods:{
setMsg(){
this.msg="我是改变后的数据"
}
},
beforeCreate(){
console.log('实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){ /*请求数据,操作dom , 放在这个里面 mounted*/
console.log('模板编译完成');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>