vue组件生命周期介绍

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