【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>

在这里插入图片描述
在上面这个案例中：

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