VUE3组件运行生命周期

  1. <template>
  2.   <div>
  3.     {{msg}}
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'btu',
  10.   data(){
  11.     return{
  12.       msg:'主键'
  13.     }
  14.   },
  15.   beforeCreate() {
  16.     console.log('1在创建组件之前调用运行')
  17.   },
  18.   created() {
  19.     console.log('2组件已经创建完成运行')
  20.   },
  21.   beforeMount() {
  22.     console.log('3在模板挂在之前运行')
  23.   },
  24.   mounted() {
  25.     console.log('4在模板挂完成以后运行')
  26.   },
  27.   beforeUpdate() {
  28.     console.log('5在内容有改变之前运行')
  29.   },
  30.   updated() {
  31.     console.log('6在数据改变完以后运行')
  32.   },
  33.   beforeUnmount() {
  34.     console.log('7在组件销毁之前运行')
  35.   },
  36.   activated() {
  37.     console.log('keep-alive标签,缓存的组件激活时调用')
  38.   },
  39.   deactivated() {
  40.     console.log('keep-alive标签,缓存的组件停用时调用')
  41.   }
  42. }
  43. </script>
  45. <style scoped lang="scss">
  47. </style>