每个vue组件实例在创建时都需要经历一系列初始化步骤，比如设置好数据侦听，编译模板，挂载实列到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码

生命周期图示​⭐

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

<template>
  <h3>组件的生命周期</h3>
</template>

<script>
/***
   * 生命周期函数
   * 创建期：beforeCreate、created
   * 挂载期：beforeMount、mounted
   * 更新期：beforeUpdate、updated
   * 销毁期：beforeDestroy、destroyed
   */
export default {
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log("组件渲染之前");
  },
  mounted(){
    console.log("组件渲染之后");
  },
  beforeUpdata(){
    console.log("组件更新之前")
  },
  updatated(){
    console.log("组件更新之后")
  },
  beforeDestroy() {
    console.log("组件销毁之前")
  },
  destroyed(){
    console.log("组件销毁之后")
  }

}
</script>

 

创建数据更新按钮

 

点击后