【Vue3】理解toRef() 和 toRefs()

历史小剧场

知道可能面对的困难和痛苦，在死亡的恐惧中不断挣扎，却仍然能战胜自己，选择这条道路，这才是真正的勇气。—-《明朝那些事儿》

前言

toRef 和 toRefs 是Vue3中的响应式转换工具函数

• toRef: 不影响源对象的情况下，对属性进行单独的访问和修改。toRef函数正是为了解耦属性的关联，将属性转换为一个独立的ref对象。并且：两者之间同步更新。
• toRefs: 在父组件向子组件传递属性时，需要将这些属性声明为响应式对象。但是，如果直接将整个响应式对象传递给子组件，子组件无法通过解耦或者直接访问每个属性。又或者是在单页面上数据双向绑定时在View层不想要写这个响应式对象点的形式而是直接访问属性。这时，toRefs函数就可以将整个响应式对象转换为一个普通对象，每个属性都是独立的ref对象，可以轻松解耦和访问这些属性。

案例

<!-- TestToRef.vue -->
<template>
    <div>
        <h1>info.name {{ name }}</h1>
        <h1>nameRef.value {{ nameRef }}</h1>
        <button @click="changInfoName">改变info.name</button>
        <button @click="changNameRef">改变nameRef.value</button>
    </div>
</template>

<script lang="ts">
import { reactive, toRef, toRefs } from 'vue';

export default {
    setup() {
        const info = reactive({
            name: '章三',
            age: 25
        })

        const nameRef = toRef(info, 'name')
        console.log(nameRef.value)

        const infoRefs = toRefs(info)
        console.log(infoRefs)
        console.log({...infoRefs})

        const changInfoName = () => {
            info.name = '李四'
        }

        const changNameRef = () => {
            nameRef.value = '王五'
        }

        return {
            ...infoRefs,
            nameRef,
            changInfoName,
            changNameRef
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

在上面这个案例中：

1. 当我们点击第一个按钮时，改变了源响应式对象里面的name属性，然后单独解耦出来的nameRef对象里的值同步变了。而当我们点击第二个按钮时，改变了单独解耦出来的nameRef对象里的值，然后源响应式对象里面的name属性也变了。这是toRef()函数在起作用
2. 注意看代码里View层的代码，我们在插槽里直接写了源响应式对象里的两个属性值，直接解耦出来了。这是toRefs()函数在起作用

比较

相同点

• toRef和toRefs都用于将响应式对象的属性转换为ref对象；
• 转化后的属性仍然保持响应式，对属性的修改会反映到源响应式对象上；
• 在script中访问和修改其值都需要通过.value进行

不同点

• toRef修改的是对象的某个属性，生成一个单独的ref对象；
• toRefs修改的是整个对象，生成多个独立的ref对象集合；
• toRefs适用于在组件属性解耦或传递时使用；而toRef更适合提取单个属性进行操作。