vue3与vue2生命周期

<template>
  <div class="home">
    <input type="text" v-model="states.value" name="" id="" />
    <nav-Headers
      @changeval="changevals"
      :numActive="states.value"
    /><!-- 父传子 子传父  -->

    <span> {{ states.getnum }}</span>
    <span @click="about"> 跳转</span>
  </div>
</template>

<script>
import router from "@/router/index.js";
import navHeaders from "../components/Home/navHeaders.vue";

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
import { reactive } from "vue";

export default {
  components: {
    navHeaders,
  },
  name: "Home",

  setup() {
    const states = reactive({
      value: 1,
      num: 11,
      getnum: "",
    });

    // 父接受子
    const changevals = (val) => {
      states.getnum = val;
      console.log(val);
    };

    let about = () => {
      router.push({
        name: "about",
        params:{
          id:1,
          name:'xiaoming'
          }
      });
    };

    onBeforeMount(() => {
      console.log("onBeforeMount-->beforeMount 模板渲染未挂载到页面中去");
    });
    onMounted(() => {
      console.log("onMounted-->mounted 真实dom已经生成");
    });

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate-->beforeUpdate 数据更新之前");
    });

    onUpdated(() => {
      console.log("onUpdated-->updated 数据更新之后");
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount-->beforeDestroy 页面销毁前");
    });
    onUnmounted(() => {
      console.log("onUnmounted-->destroyed 页面销毁后");
    });

    // 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数
    onActivated(() => {
      console.log("onActivated-->activited keep-alive 缓存的组件激活时调用");
    });
    onDeactivated(() => {
      console.log("onDeactivated-->deactivated keep-alive 缓存的组件停用时调用");
    });

    onErrorCaptured(() => {
      console.log("onErrorCaptured-->errorCaptured 当捕获一个来自子孙组件的异常时激活钩子函数");
    });
    // 调试用
    onRenderTracked(() => {
      console.log("onRenderTracked 状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在");
    });
    onRenderTriggered(() => {
      console.log("onRenderTriggered 状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来");
    });
   
   
    return {
      states,
      changevals,
      about,
    };
  },
};
</script>