Vue 响应式数据解构神器：toRefs 与 toRef 深度解析

本文链接：https://blog.csdn.net/m0_57836225/article/details/145762201

在 Vue 开发中，处理响应式数据是一项关键任务。当我们使用reactive定义了一个响应式对象后，在解构其属性时会遇到一些问题。而toRefs和toRef这两个 API 就像是救星，帮助我们优雅地解决这些难题。接下来，就让我们深入了解一下它们的神奇之处。

一、问题引入：直接解构响应式对象的困境

假设我们定义了一个包含个人信息的响应式对象person，代码如下：

<template>
  <div>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const person = reactive({
  name: '张三',
  age: 18
});

const changeName = () => {
  person.name += '~';
};

const changeAge = () => {
  person.age += 1;
};
</script>

在上述代码中，我们通过reactive定义了person对象，并且可以通过点击按钮修改其属性，页面也会实时更新。但是，如果我们尝试对person进行解构赋值，会发生什么呢？

html

<template>
  <div>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const person = reactive({
  name: '张三',
  age: 18
});

const { name, age } = person;

const changeName = () => {
  name += '~';
};

const changeAge = () => {
  age += 1;
};
</script>

此时，当我们点击按钮修改name和age时，页面并不会更新。这是因为直接解构出来的name和age已经失去了响应式，它们只是普通的变量，与原始的person对象没有关联。

二、toRefs：批量创建响应式引用

toRefs的作用就是把一个reactive定义的响应式对象，转换为由ref组成的对象。这样，我们在解构这个新对象时，得到的属性仍然是响应式的。

<template>
  <div>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

const person = reactive({
  name: '张三',
  age: 18
});

const { name, age } = toRefs(person);

const changeName = () => {
  name.value += '~';
};

const changeAge = () => {
  age.value += 1;
};
</script>

在这段代码中，我们通过toRefs(person)将person对象转换后再解构。此时，name和age都是ref类型的响应式数据，修改它们的value属性，页面会同步更新。这是因为toRefs会为原对象的每个属性创建一个对应的ref，这些ref与原对象的属性保持着关联。

三、toRef：创建单个响应式引用

toRef则是用于从响应式对象中创建一个指向特定属性的响应式引用。它接收两个参数，第一个是响应式对象，第二个是要提取的属性名。

<template>
  <div>
    <h2>年龄：{{ nl.value }}</h2>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup>
import { reactive, toRef } from 'vue';

const person = reactive({
  name: '张三',
  age: 18
});

const nl = toRef(person, 'age');

const changeAge = () => {
  nl.value += 1;
};
</script>

在上述代码中，我们使用toRef(person, 'age')创建了一个指向person.age的响应式引用nl。通过修改nl.value，同样可以实现对person.age的响应式修改，页面也会随之更新。