一文搞懂Vue3中toRef和toRefs的区别
作者：前端小码哥
toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下
上面这段代码中：
- 我们使用 reactive 创建了一个名为 info 的响应式对象，包含 name 和 age 属性。
- 然后使用 toRef 函数将 info 对象的 age 属性转换为一个独立的 ref 对象。
- 接着定义了两个方法 updateInfoObjAge 和 updateAge，分别用于更新 info 对象的 age 属性和 age 引用的值。
从上面的代码中，我们可以看到，age 属性是使用 toRef 函数转换的具有响应式的 ref 属性，当我们更新时，使用 reactive 定义的响应式对象 info 中的 age 也会随着更新。
<script setup>
import { reactive } from 'vue';
let info = reactive({
name: 'Echo',
age: 26,
gender: 'Male',
})
// 这样解构会丢失响应式效果
let { name, age, gender } = info;
</script>下面，我们一起看看 toRef 和 toRefs 的用法：
1. toRef
- toRef 函数可以将一个响应式对象的属性转换为一个独立的 ref 对象。
- 返回的是一个指向源对象属性的 ref 引用，任何对该引用的修改都会同步到源对象属性上。
- 使用 toRef 时需要传入源对象和属性名作为参数。
下面我们一起看一段代码：
<script setup>
import { reactive, toRef } from 'vue';
let info = reactive({
name: 'Echo',
age: 26,
})
let age = toRef(info, 'age');
const updateInfoObjAge = () => {
info.age++;
}
const updateAge = () => {
age.value++;
}
</script>
<template>
<div id="app">
<p>info对象中的age：{{ info.age }}</p>
<button @click="updateInfoObjAge">更新info对象中的 age</button>
<br />
<p>使用toRef函数转换后的age：{{ age }}</p>
<button @click="updateAge">更新 age</button>
</div>
</template>上面这段代码中：
- 我们使用 reactive 创建了一个名为 info 的响应式对象，包含 name 和 age 属性。
- 然后使用 toRef 函数将 info 对象的 age 属性转换为一个独立的 ref 对象。
- 接着定义了两个方法 updateInfoObjAge 和 updateAge，分别用于更新 info 对象的 age 属性和 age 引用的值。
从上面的代码中，我们可以看到，age 属性是使用 toRef 函数转换的具有响应式的 ref 属性，当我们更新时，使用 reactive 定义的响应式对象 info 中的 age 也会随着更新。
而且，从开发工具中，我们也可以看到，age 属性是一个具有 ref 响应式的属性。
2. toRefs
- toRefs 函数可以将一个响应式对象转换为一个普通的对象，该对象的每个属性都是独立的 ref 对象。
- 返回的对象可以进行解构，每个属性都可以像普通的 ref 对象一样访问和修改，而且会保持响应式的关联。
- toRefs 的使用场景主要是在将响应式对象作为属性传递给子组件时，确保子组件可以正确地访问和更新这些属性。
下面我们一起看一段代码：
<script setup>
import { reactive, toRefs } from 'vue';
let info = reactive({
name: 'Echo',
age: 26,
gender: 'Male',
})
let { name, age, gender } = toRefs(info);
const update = () => {
name.value = 'Julie';
age.value = 33;
gender.value = 'Female';
}
</script>
<template>
<div id="app">
<p>info对象中的name：{{ info.name }}</p>
<p>info对象中的age：{{ info.age }}</p>
<p>info对象中的gender：{{ info.gender }}</p>
<br />
<p>解构出来的name：{{ name }}</p>
<p>解构出来的age：{{ age }}</p>
<p>解构出来的gender：{{ gender }}</p>
<button @click="update">更新数据</button>
</div>
</template>上面这段代码中：
- 首先，使用 reactive 函数创建了一个响应式对象 info，包含了 name、age 和 gender 三个属性，同时设置了初始值。
- 接着，使用 toRefs 函数将 info 对象转换为多个独立的响应式引用对象。然后通过解构赋值，把 name、age 和 gender 三个响应式引用对象分别赋给了相应的变量。
- 最后，添加了一个按钮，点击按钮会触发 update 函数，在 update 函数中，通过修改响应式引用对象的 value 属性来更新数据的值。
从开发工具中，我们可以看到，解构出来的每个属性，都是独立的具有 ref 响应式的属性，因此，我们需要使用 .value 才能访问和修改其值。
3. 相同点
- toRef 和 toRefs 都用于将响应式对象的属性转换为 ref 对象。
- 转换后的属性仍然保持响应式，对属性的修改会反映到源对象上。
- 不管是使用 toRef 还是 toRefs 将响应式对象转成普通对象，在 script 中修改和访问其值都需要通过 .value 进行。
4. 不同点
- toRef 修改的是对象的某个属性，生成一个单独的 ref 对象。
- toRefs 修改的是整个对象，生成多个独立的 ref 对象集合。
- toRefs 适用于在组件传递属性或解构时使用，更加方便灵活，而 toRef 更适合提取单个属性进行操作。
通过上面对 toRef 和 toRefs 函数的了解，你们知道为什么需要 toRef 和 toRefs 了吗？
总结起来就是：在不丢失响应式的前提下，对响应式对象数据进行解构，这样如果在 setup 中返回 toRefs(obj)，或者 toRef(obj, 'xxx')，我们就可以在 template 中不使用 obj.xxx 来取值了。
以上就是一文搞懂Vue3中toRef和toRefs的区别的详细内容，更多关于Vue3 toRef和toRefs区别的资料请关注脚本之家其它相关文章！