Vue3.0实现todolist之常用的生命周期onMounted

import{ defineComponent, ref, onMounted } from "vue";

setup() {
    onMounted(() => {
      //组件挂载的过程 包括数据 dom等
      console.log("onMounted");
    });
    console.log("setup");
}

<template>
  <div>
    <button @click="start">开始任务</button>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({
  name: "Start",

  setup() {
    //router是全局路由对象
    let router = useRouter();
    console.log(router);

    let name = ref("jack");
    let num = ref(10);
    let obj = ref({
      msg: "start",
    });

    onMounted(() => {
      //组件挂载的过程 包括数据 dom等
      console.log("onMounted");
    });
    console.log("setup");

    let start = () => {
      //push 如果传递的是对象的形式 就可以传递参数

      router.push({
        // path: "/home",
        //push里面还可以传入name name是路由名字
        // query传参path和name都可以
        // params传参只能用name
        name: "Home",
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj.value),
        },
      });
    };

    return {
      start,
    };
  },
});
</script>

<style scoped></style>

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>
    {{ num }}
    {{ name }}
    {{ obj }}
    <!-- <button @click="goto">跳转路由</button> -->
  </div>
</template>

<script>
// import NavHeader from "@/components/navHeader/NavHeader.vue";
// import NavMain from "@/components/navMain/NavMain.vue";
// import NavFooter from "@/components/navFooter/NavFooter.vue";
import { defineComponent, ref, computed, onMounted } from "vue";

import { useStore } from "vuex";

import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    // NavHeader,
    // NavMain,
    // NavFooter,
  },
  setup() {
    //router是全局路由对象
    let router = useRouter();
    //当前的路由对象
    let route = useRoute();
    let num = ref(null);
    let name = ref("");
    let obj = ref({});

    onMounted(() => {
      num.value = route.params.num;
      name.value = route.params.name;
      debugger;
      obj.value = JSON.parse(route.params.obj);
    });

    //query传递过来的参数都是字符串类型
    // console.log("打印route", route.params);

    return {
      num,
      name,
      obj,
    };
  },
});
</script>

<style></style>

import{ defineComponent, ref, onMounted,onUnmounted } from "vue";

onUnmounted(() => {
      //组件卸载时生命周期
      
      //一般用于清除定时器 清除闭包函数…
      console.log("onUnmounted");
    });