VUE3组件运行生命周期

发布于：2022-01-19 09:21:05  栏目：技术文档

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在组件销毁之前运行')
  },
  activated() {
    console.log('keep-alive标签,缓存的组件激活时调用')
  },
  deactivated() {
    console.log('keep-alive标签,缓存的组件停用时调用')
  }
}
</script>
<style scoped lang="scss">
</style>

相关推荐