vue3.0--常用的生命周期函数

上节课的route.params数据，拿到了。但是，你真的会取出来，应用到项目中嘛？ 这节告诉你怎么取。在哪取。 因为vue3.0的中setup运行顺序要在OnMounted之前，所以在setup中取中route.params之后，要在onMounted里将数据放到对应的参数中。onMounted用来数据初始化，接收路由参数。 onUnmounted 是卸载生命周期，用来清除定时器，清除闭包函数 在每次切换路由时会执行onUnmounted

<template>
  <div class="about">
    <h1>{
          
   {
          
   name}}---{
          
   {
          
   age}}---{
          
   {
          
   obj}}</h1>
  </div>
</template>
<script>
import {
          
    defineComponent, onMounted, onUnmounted,ref } from vue
import {
          
   useRouter, useRoute} from vue-router
export default defineComponent({
          
   
  setup() {
          
   
    // 组件 创建的过程
    let route = useRoute()
    console.log( route,route.params)
    let name = ref()
    let age = ref(null)
    let obj = ref({
          
   })
    // 先执行setup,再执行onMounted
     onMounted(()=>{
          
   
    // 组件挂载的过程
    //数据， dom
    // 发语法
    //数据初始化操作，接收路由传递的参数
    console.log(onMounted)
    name.value = route.params.name
    age.value = route.params.age *1
    obj.value= JSON.parse(route.params.obj)
  })
  onUnmounted(()=>{
          
   
    //组件卸载时的生命周期
    // 清除定时器，清除闭包函数
    console.log(onunmounteds)
  })
  console.log(setup)
  return{
          
   
        name,
        age,
        obj
    }
  },
 
})
</script>