vue组件生命周期介绍

最新推荐文章于 2025-04-08 16:48:53 发布

原创最新推荐文章于 2025-04-08 16:48:53 发布 · 367 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#compoment #生命周期 #组件

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.生命周期图例