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

生命周期：一个组件从创建到销毁的过程

1：setup
不需要引入的生命周期：setup 代表组件创建的过程
可以直接在里面使用

2：onMounted

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

onMounted组件挂载的生命周期
比setup晚一些，是一个函数，里面传入回调函数
onMounted(() =>{
//组件挂载的过程
//包括数据，dom…
})

onMounted是一个函数里面再传入一个回调函数回调函数里面没有参数

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

setup会先执行，和书写顺序没关系

onMounted有哪些用法

1：发请求
要通过跟后端交互来获取一些数据，就可以放在onMounted里面来发一些数据请求、

2：做一些数据初始化的操作
比如说最常见的就是接收路由传递的参数

通过当前组件定义的数据来接收传递过来的数据

Start.vue

<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>

Home.vue

<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>

3：onUnmounted
onUnmounted组件卸载时的生命周期，一般用于清除定时器清除闭包函数…

引入

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

使用

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

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

祈澈菇凉

所有评论(0)

祈澈菇凉