VUE3组件运行生命周期

VUE3组件运行生命周期

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'btu',
  data(){
    return{
      msg:'主键'
    }
  },
  beforeCreate() {
    console.log('1在创建组件之前调用运行')
  },
  created() {
    console.log('2组件已经创建完成运行')
  },
  beforeMount() {
    console.log('3在模板挂在之前运行')
  },
  mounted() {
    console.log('4在模板挂完成以后运行')
  },
  beforeUpdate() {
    console.log('5在内容有改变之前运行')
  },
  updated() {
    console.log('6在数据改变完以后运行')
  },
  beforeUnmount() {
    console.log('7在组件销毁之前运行')
  },
  unmounted() {
    console.log('8组件销毁后执行')
  },
  activated() {
    console.log('缓存组件,激活时调用')
  },
  deactivated() {
    console.log('缓存组件,停用时调用')
  },
  setup(){
    console.log('只执行一次')
  }
}
</script>

<style scoped lang="scss">

</style>