开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第11天，点击查看活动详情

上一篇介绍了ref和reactive的用法和区别，这一篇我们来介绍一下toRef和toRefs的用法和区别。

ref和reactive它们在用法上区别还是蛮大的，一个针对基本数据类型，一个针对复杂数据类型。而toRef和toRefs它们其实在用法上是很类似的，都是用来复制reactive里面的属性然后转成ref。因此既保留了响应式也保留了引用，也就是说它的复制其实是响应式ref和引用。要说区别的话那就是toRef是用来复制reactive对象上的某个属性将其转成ref，而toRefs是用来复制reactive对象上的所有属性都转成ref。

1. toRef

1.1 使用方法

<div>姓名：{{person.name}}</div>
<div>年龄：{{person.age}}</div>
<div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
<div v-for="(item, index) in person.hobbies" :key="index">爱好列表
  <div>{{item}}</div>
</div>
<div>另外的人：{{name}}</div>
<button @click="updateInfo">修改信息</button>

<script setup>
import { reactive, toRef } from 'vue';
let person = reactive({
  name: '艾薇儿',
  age: 18,
  friend: {
    name: '安妮·海瑟薇',
    age: '28'
  },
  hobbies: ['music', 'dance', 'movie']
});
const name = toRef(person, 'name');
console.log('person', person);
console.log('name', name);
const updateInfo = () => {
  name.value = '疯驴子';
  // perso.name = '疯驴子';  // 效果相同
  console.log('person', person);
  console.log('name', name);
}
</script>

初始化效果：

修改数据后效果：

从上述效果图中可以看出，使用toRef复制reactive对象中的属性值，修改这个ref对象其实也修改了reactive对象，修改reactive对象中的这个属性，也修改了这个ref值。

1.2 使用场景

当我们在渲染数据时，不希望用到前缀时，可以使用组合toRef()。

2. toRefs

2.1 使用方法

toRefs的用法和toRef类似。

<div>姓名：{{person.name}}</div>
<div>年龄：{{person.age}}</div>
<div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
<div v-for="(item, index) in person.hobbies" :key="index">爱好列表
  <div>{{item}}</div>
</div>
<div>另外的人：{{refPerson.name}}</div>
<button @click="updateInfo">修改信息</button>

<script setup>
import { reactive, toRefs } from 'vue';
let person = reactive({
  name: '艾薇儿',
  age: 18,
  friend: {
    name: '安妮·海瑟薇',
    age: '28'
  },
  hobbies: ['music', 'dance', 'movie']
});
const refPerson = toRefs(person);
console.log('person', person);
console.log('refPerson', refPerson);
const updateInfo = () => {
  refPerson.name.value = '疯驴子';
  console.log('person', person);
  console.log('refPerson', refPerson);
}
</script>

初始化效果：

修改值之后的效果：

从上面的效果图可以看出，使用toRefs复制reactive对象中的属性值，修改这个ref对象中的任意属性值其实也修改了reactive对象，修改reactive对象中的任意属性，也修改了这个ref对象的属性。

2.2 使用场景

用于转换响应式对象中所有属性为响应式数据，通常用于解构reactive定义的对象。

小结

toRef和toRefs可以理解为对象的浅拷贝，它们在某种意义上是一样的。

vue3定义响应式数据之toRef和toRefs