vue3.0生命周期挂钩

<template>
  <div id="home">
    <div>{
   
   { readersNumber }}</div>
    <div>{
   
   { data.name }}</div>
    <div>{
   
   { name }}</div>
    <button @click="change">改变</button>
  </div>
</template>

<script>
import {
     
     
  ref, //ref() 函数用来根据给定的值创建一个(响应式的数据对象)，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性
  reactive, //传入的为引用类型，例如数组、对象等(响应式的数据对象)
  toRefs, //toRefs() 函数可以将 reactive() 创建出来的(响应式对象)，转换为普通的对象，相当于变成一个个的ref()
  onBeforeMount, //组件挂在到页面之前执行
  onMounted, //组件挂在到页面之后执行
  onBeforeUpdate, //在组件更新之前执行
  onUpdated, //在组件更新之后执行
  onBeforeUnmount, //在组件卸载之前执行
  onUnmounted, //在组件卸载之后执行
  onActivated, 被激活时执行 ;被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数(onActivated,onDeactivated)。
  onDeactivated, //在组件切换中老组件消失的时候执行(比如从 A 组件，切换到 B 组件，A 组件消失时执行)
  onRenderTriggered, //状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
  onRenderTracked, //状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在
  // onErrorCaptured,//当捕获一个来自子孙组件的异常时激活钩子函数
} from "vue";
export default {
     
     
  name: "Home",
  components:{
     
     
  },
  setup() {
     
     
    const readersNumber = ref(0);
    const data = reactive({
     
     
      name: "张三",
      obj: ["王二麻子", "李白", "王五", "小秋秋"],
      arr: [0, 1, 2, 3],
      fn: () => {
     
     
        return 100;
      },
    });
    const reData = toRefs(data);
    function change() {
     
     
      readersNumber.value += 1;
      if (readersNumber.value > 3) readersNumber.value = 0;
      data.name = data.obj[readersNumber.value];
    }
    console.log("1...setup()组件创建之中");
    onBeforeMount(() => {
     
     
      console.log("2...onBeforeMount()组件挂在到页面之前执行");
    });

    onMounted(() => {
     
     
      console.log("3...onMounted()组件挂在到页面之后执行");
    });

    onBeforeUpdate(() => {
     
     
      console.log("4...onBeforeUpdate()在组件更新之前执行");
    });

    onUpdated(() => {
     
     
      console.log("5...onUpdated()在组件更新之后执行");
    });

    onBeforeUnmount(() => {
     
     
      console.log("6...onBeforeUnmount()在组件卸载之前执行");
    });

    onUnmounted(() => {
     
     
      console.log("7...onUnmounted()在组件卸载之后执行");
    });

    onActivated(() => {
     
     
      console.log("8...onActivated缓存激活");
    });
    onDeactivated(() => {
     
     
      console.log("9...onDeactivated()在组件切换中老组件消失的时候执行");
    });
    onRenderTriggered((event) => {
     
     
      console.log("10...onRenderTriggered跟踪变化的下信息，返回新值和旧值", event);
    });
    onRenderTracked((event) => {
     
     
      console.log("11...onRenderTracked:跟踪页面上所有响应式变量和方法的状态并且返回新值", event);
    });
    return {
     
     
      readersNumber,
      data,
      ...reData,
      change
    };
  },
};
</script>