? Vue3 使用

? Vue3 使用

Vue3之toRefs的使用

作用
toRefs()可以将一个响应式的对象，转换成普通对象。但是转换后的普通对象的每一个属性值都是响应式的
这样我们可以使用es6的对象解构或者三点运算符等操作

代码

<script setup>
import { reactive, toRefs, toRef } from 'vue';
const person = reactive({ name: "SunWuKong", age: 18 })
// 使用ES6进行解构,toRefs会将响应式对象的左右的属性变为响应式
let { name, age } = toRefs(person) // 结构出来的变量直接是就是响应式的ref
let refName = toRef(person, "name")
let refage = person.age

const changeName = () => person.name += "~"
const changeAge = () => person.age += 1

</script>

<template>
    <h2>toRefs</h2>
    <div>姓名:{{ name }},年龄:{{ age }}</div>
    <h2>toRef</h2>
    <!-- 当前的age就是非响应式的age，他不会变 -->
    <div>姓名:{{ refName }},年龄:{{ refage }}</div>
    <section>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </section>
</template>

vue3-RouteRecordRaw

vue3中的RouteRecordRaw
RouteRecordRaw 是 Vue Router 4.x 中新增的类型，用于定义路由配置。它是一个 TypeScript 类型

import { RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

需要注意的是，RouteRecordRaw 只是一个类型定义，它并不会自动注册路由。要将其注册到 Vue Router 中，还需要使用 createRouter 函数创建路由实例，并将路由记录传递给该实例的 routes 属性：

import { createRouter, createWebHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  // ...
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})