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>

效果