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