【Vue】Vue3.0（十）toRefs()和toRef()的区别及使用示例

上篇文章：Vue】Vue（九）OptionsAPI与CompositionAPI的区别

🏡作者主页：点击！

🤖Vue专栏：点击！

⏰️创作时间：2024年10月15日11点13分

toRefs()和toRef()的区别及使用示例

一、区别

（一）功能目的

• toRef
  • toRef的主要目的是将一个reactive对象中的某个属性转换为一个ref。这个转换后的ref与原reactive对象中的属性保持“响应式连接”，即修改ref的值会反映到原reactive对象中，反之亦然。
• toRefs
  • toRefs用于将一个reactive对象的所有属性都转换为对应的ref对象。这样做的好处是在解构reactive对象时，不会丢失响应式特性。

根据下面的那张图
为了更容易理解：这种大白话说就是，toRefs（）接受一个响应式的reactive对象，并将其中的所有的属性都取出来，并且将旧的响应式对象中的每一个属性都拿出来，并都分别被ref包裹，形成一个新的对象，对象中依然有name和age属性，只不过name和age的值分别都是ref(person.name)了：
{name:ref(person.name),age:ref(person.age)}

（二）返回值类型

• toRef
  • 返回一个单独的ref对象。例如，如果有一个reactive对象state，使用toRef(state, 'property')会返回一个针对state.property的ref对象。
• toRefs
  • 返回一个包含多个ref对象的普通对象。每个属性对应原reactive对象中的一个属性转换后的ref。

（三）使用场景侧重

• toRef
  • 适用于当需要单独操作reactive对象中的某个属性，并且希望保持与原对象的响应式连接时。例如，在函数传递中，只想传递某个特定属性并且保持响应式。
• toRefs
  • 当需要解构一个reactive对象并且在解构后仍然保持每个属性的响应式时非常有用。这在将reactive对象的属性暴露给外部或者在组件内部进行更方便的属性操作时经常使用。

二、使用例子

（一）toRef示例

1. 基础示例

   • 首先创建一个reactive对象：

   import { reactive, toRef } from 'vue';
   
   const state = reactive({
     count: 0,
     message: 'Hello'
   });
   
   const countRef = toRef(state, 'count');
   
   console.log(countRef.value); // 0
   
   countRef.value++;
   
   console.log(state.count); // 1
   

   • 在这个例子中，通过toRef将reactive对象state中的count属性转换为一个ref对象countRef。修改countRef的值，会同时改变原reactive对象state中的count属性值。

2. 函数传递示例

   • 假设有一个函数，它接受一个ref类型的参数并且在函数内部修改这个参数的值：

   const updateValue = (refValue) => {
     refValue.value = 10;
   };
   
   const state = reactive({
     num: 5
   });
   
   const numRef = toRef(state, 'num');
   
   updateValue(numRef);
   
   console.log(state.num); // 10
   

   • 这里将reactive对象中的num属性转换为ref后传递给updateValue函数，函数内部对ref值的修改反映到了原reactive对象上。

（二）toRefs示例

1. 基础示例

   • 同样先创建一个reactive对象：

   import { reactive, toRefs } from 'vue';
   
   const state = reactive({
     name: 'John',
     age: 30
   });
   
   const refs = toRefs(state);
   
   console.log(refs.name.value); // John
   
   refs.age.value++;
   
   console.log(state.age); // 31
   

   • 使用toRefs将reactive对象state的所有属性转换为ref对象。然后可以通过解构后的refs对象方便地操作每个属性，并且这些操作会反映到原reactive对象上。

2. 在组件中的应用示例

   • 在Vue组件中，当要将reactive对象的属性暴露给模板时，可以使用toRefs来保持响应式：

   import { reactive, toRefs, defineComponent } from 'vue';
   
   const MyComponent = defineComponent({
     setup() {
       const state = reactive({
         isVisible: false,
         text: 'Some text'
       });
   
       const refs = toRefs(state);
   
       return {
        ...refs
       };
     }
   });
   

   • 在这个组件的setup函数中，将reactive对象state转换为refs后，直接将所有属性通过展开运算符返回给模板使用。这样在模板中可以直接使用isVisible和text，并且它们保持响应式特性。