1.组件生命周期列表
钩子函数 | 触发时期 | 特点 |
beforeCreate | 组件实例化之前 | data和methods里面的属性和方法还是读取不到的 |
created | 组件已经实例化 | data和methods 都已经初始化完成,但是这时模板还没有编译 |
beforeMount | 组件挂载之前 | 模板已经编译,但是页面还没有渲染,页面的内容还是模板字符串 |
mounted | 组件已挂载 | 页面渲染完成,可以看到最终的页面效果 |
beforeUpdate | 页面更新之前 | 此时data里的属性更新了,但是页面还没有更新 |
updated | 页面更新后 | 此时data和页面的内容都是最新的 |
beforeDestroy | 页面销毁之前 | 常用于清除定时器 |
destroyed | 页面销毁之后 | 此时页面已关闭 |
2.组件生命周期代码实例
<template>
<div class="about">
<h1>组件-生命周期</h1>
<div id="msg">{{msg}}</div>
<button @click="modify">修改msg</button>
</div>
</template>
<script>
export default {
name:'About',
data(){
return{
msg:'Yes'
}
},
methods:{
modify(){
this.timer =setTimeout(()=>{
this.msg = Date.now();
console.log(this.msg);
},3000);
},
show(){
console.log('执行了show方法')
}
},
beforeCreate() {
//组件实例化之前,
//data和methods里面的属性和方法还是读取不到的
// console.log(this.show()); //无法执行,控制台直接报错
},
created() {
// data和methods 都已经初始化完成
// 此时能获取data和methods里面的属性和方法
//但是这时模板还没有编译
console.log(this.msg)
this.show();
},
beforeMount() {
//模板已经编译,但是页面还没有渲染
//页面的内容还是模板字符串
console.log('beforeMount',document.getElementById('msg')); //打印结果是null
},
mounted() {
//页面渲染完成,可以看到最终的效果
console.log('mounted',document.getElementById('msg')); //打印结果是Yes
},
beforeUpdate() {
//页面更新之前
//此时data里的属性更新了,但是页面还没有更新
console.log('beforeUpdate',this.msg,
document.getElementById('msg').innerText
);
},
updated() {
//页面更新后
//此时data和页面的内容都是最新的
console.log('updated',this.msg,
document.getElementById('msg').innerText
);
},
beforeDestroy() {
//页面销毁之前
//常用于清除定时器
console.log('beforeDestroy');
clearTimeout(this.timer);
},
destroyed() {
//页面销毁之后
console.log('destroyed')
}
}
</script>
<style lang="css" scoped>
</style>
3.生命周期图例