VUE3生命周期

VUE3运行生命周期

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
import MyBut from "./components/Mybut";<!--导入组件-->
import AnLiu from "./components/AnLiu";
export default {
  components(){<!--导入组件的名称-->
    MyBut,
    AnLiu
  }
  name: 'btu',
  data(){
    return{
      msg:'主键',
      num1:12,
      num2:5
    }
  },
  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('缓存组件,停用时调用')
  },
  watch:{
      console.log('监听属性，监听当前页面有变化，就执行watch。')
    num1(newVal, oldVal) {//第一个参数新的值，第二个参数旧值
      console.log("b--newVal: ", newVal, "b--oldVal: ",oldVal);
    }
  }，
  methods:{  <!--在这里面写入function-->
    fun(){
    }
  },
  setup(){
    console.log('只执行一次')
  },
  computed:{  <!--计算属性-->
    num:{  <!--num相当于是data里面的属性，data里面和计算属性只能有一个-->
     get(){
       return this.num1+'-'+this.num2//只能读取数据。
     },
     set(){//如果更改了num，先执行set修改数据，在执行get读取数据
         this.tol=this.num1+'-'+this.num2
     }
    }
    num3:{//不写方法，默认get
     return this.num1+'-'+this.num2
    }
  }
}
</script>
<style scoped lang="scss">
</style>

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method