v3的一些用法

路由的使用 - computed 计算属性 – watch( ()=>{} )-- toRefs – onMounted

import { computed, onMounted, reactive ,toRefs ,watch} from 'vue';
import { useRoute } from 'vue-router';

setup(props, context ){ // 默认执行一次  setup启动的意思 在created 之前  拿不到this实例
    console.log('setup', props, context);
     onMounted(()=>{
      console.log(123);
    })
    const route = useRoute()  // 获取到路由
    const state = reactive({
      selectedKeys:computed(()=>{  // computed 计算属性
        if(route.path ==='/'){
          return '1'
        }else if(route.path ==='/plan'){
          return '2'
        }
      }),
      a:0
    })

    // 路由信息
    // watch(()=>route.path,(newV)=>{
    //   console.log(newV,'1');
    //  if(newV ==='/'){
    //     state.selectedKeys = '1'
    //   }else if(newV ==='/plan'){
    //    state.selectedKeys = '2'
    //   }
    //   state.selectedKeys = [newV]
    // },{immediate:true})// immediate:true 立即执行

    // const selectedKeys = computed(()=>{ // computed 计算属性
    //   if(route.path ==='/'){
    //     return '1'
    //   }else if(route.path ==='/plan'){
    //     return '2'
    //   }
    // })

    return {
      ...toRefs(state), // 保證数据是响应式的 并且还有结构的功能
      // selectedKeys
    }
  }

computed 计算属性 有2中使用方式

     const selectedKeys = computed(()=>{ // computed 计算属性
       if(route.path ==='/'){
         return '1'
       }else if(route.path ==='/plan'){
         return '2'
       }
     })
 return {
      ...toRefs(state), // 保證数据是响应式的 并且还有结构的功能
      selectedKeys
    }

 const state = reactive({
      selectedKeys:computed(()=>{  // computed 计算属性
        if(route.path ==='/'){
          return '1'
        }else if(route.path ==='/plan'){
          return '2'
        }
      }),
      a:0
    })
    
    return {
      ...toRefs(state), // 保證数据是响应式的 并且还有结构的功能
    }