首先,我们会有个疑问,为什么需要 toRef 和 toRefs?
toRef 和 toRefs 是 Vue3 中的响应式转换工具函数,它们的存在主要有以下两点原因:
在 Vue 中,直接使用响应式对象的属性可以实现属性的双向绑定和响应式更新。但是有时候需要将某个属性提取出来作为独立的 ref 对象,这样可以在不影响源对象的情况下,对属性进行单独的访问和修改。toRef 函数正是为了解耦属性的关联,将属性转换为一个独立的 ref 对象。Vue 的组件系统中,父组件向子组件传递属性时,需要将这些属性声明为响应式对象。但是,如果直接将整个响应式对象传递给子组件,子组件无法通过解构或者直接访问每个属性。这时,toRefs 函数就可以将整个响应式对象转换为一个普通对象,每个属性都是独立的ref对象,子组件可以轻松解构和访问这些属性。换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,解构出来的属性值依然是响应式属性,如果不用 toRef 或者 toRefs,直接解构会丢失响应式效果。
<script setup> import { reactive } from 'vue'; let info = reactive({ name: 'Echo', age: 26, gender: 'Male', }) // 这样解构会丢失响应式效果 let { name, age, gender } = info;</script>下面,我们一起看看 toRef 和 toRefs 的用法:
1. toReftoRef 函数可以将一个响应式对象的属性转换为一个独立的 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. toRefstoRefs 函数可以将一个响应式对象转换为一个普通的对象,该对象的每个属性都是独立的 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 来取值了。
作者:前端小码哥链接:https://juejin.cn/post/7280783758618525732