一文搞懂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区别的资料请关注脚本之家其它相关文章！