11,vue学习笔记 – 生命周期(钩子)函数
官方学习链接:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
定义:组件挂载 更新 销毁时触发的函数方法。
mounted(){}
<templete>
<div id="life">
生命周期函数演示 -- {{msg}}
<button @click="setMsg()">执行方法改变msg</button>
</div>
</templete>
<script>
export default{
data(){
return{
msg:'我是一个生命周期函数'
}
},
mounted(){
setMsg(){
this.msg ="我是改变后的数据"
}
console.log('我是一个生命周期函数');
},
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据,操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>