生命周期：一个组件从创建到销毁的过程
1：setup
不需要引入的生命周期：setup 代表组件创建的过程
可以直接在里面使用
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"); });
