vue3 生命周期

vue3组件的生命周期包含创建、挂载、激活、卸载等周期，就好比人生一样出生、上学、工作，vue3的生命周期和vue2有一些命名不一样，我们将之对比。

vue3 与 vue2 生命周期对比

vue2	vue3	说明
beforeCreate	setup()	开始创建组件之前,实例被创建，还没有初始化好data和methods等属性
created	setup()	已初始化好data和method等，但还没有开始编译模板
beforeMount	onBeforeMount	模板编译完成，但还没有挂载到页面中
mounted	onMounted	把编译好的模板挂载到页面容器中显示，此周期用的较多
beforeUpdate	onBeforeUpdate	把data渲染到界面之前执行
updated	onUpdated	把data数据更新到UI完成后
beforeDestroy	onBeforeUnmount	销毁实例之前执行
destroyed	onUnmounted	销毁实例完成后执行
activated	onActivated	被 keep-alive 缓存激活时调用
deactivated	onDeactivated	被 keep-alive 缓存睡眠时调用
errorCaptured	onErrorCaptured	捕获子孙组件的错误时被调用此钩子包含三个参数：错误对象、组件实例、一个包含错误来源信息的字符串可以返回 false 以阻止该错误继续向上传播。

<script setup>
  import { reactive, ref ,onMounted} from "vue";   
  //把编译好的模板挂载到页面容器中显示时执行
  onMounted(()=>{
   console.log('编译模板完成')
  })
</script>

<script>
export default {
  name: "app", 
  mounted(){
    console.log('编译模板完成')
  },
  methods: {
    test: function () { 
    },
  },
};
</script>