当前位置：首页 > article >正文

Vue 3 中的 toRef 与 toRefs：使用与案例解析

article 2025/1/30 20:22:13

在 Vue 3 的响应式系统中，toRef 和 toRefs 是两个非常实用的工具函数。它们主要用于将响应式对象的属性转换为单独的 ref，以便在模板或逻辑中更方便地使用。本文将详细介绍 toRef 和 toRefs 的用法，并通过一个老师信息的案例来演示它们的实际应用。

1. `toRef` 与 `toRefs` 的定义

1.1 `toRef`

toRef 用于从响应式对象中提取一个属性，并将其转换为一个 ref。这个 ref 会与源对象的属性保持同步。

import { reactive, toRef } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30
});

const nameRef = toRef(state, 'name'); // 将 state.name 转换为 ref
console.log(nameRef.value); // Alice

1.2 `toRefs`

toRefs 用于将整个响应式对象的所有属性转换为一个包含多个 ref 的对象。每个 ref 都会与源对象的对应属性保持同步。

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30
});

const stateRefs = toRefs(state); // 将 state 的所有属性转换为 ref
console.log(stateRefs.name.value); // Alice
console.log(stateRefs.age.value); // 30

2. `toRef` 与 `toRefs` 的区别

特性	`toRef`	`toRefs`
作用对象	单个属性	整个对象的所有属性
返回值	单个 `ref`	包含多个 `ref` 的对象
适用场景	需要提取单个属性时使用	需要解构或传递多个属性时使用
与源对象的关系	保持与源对象属性的响应式连接	保持与源对象所有属性的响应式连接

3. 案例：老师信息管理

假设我们有一个老师的信息对象，包含姓名、年龄和教授的课程。我们将使用 toRef 和 toRefs 来管理这些信息，并演示如何修改数据。

3.1 初始代码

<template>
  <div>
    <h2>老师信息</h2>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>课程: {{ course }}</p>
    <button @click="updateTeacher">修改老师信息</button>
  </div>
</template>

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

export default {
  setup() {
    // 定义老师信息的响应式对象
    const teacher = reactive({
      name: '张老师',
      age: 40,
      course: '数学'
    });

    // 使用 toRef 提取单个属性
    const nameRef = toRef(teacher, 'name');

    // 使用 toRefs 提取所有属性
    const teacherRefs = toRefs(teacher);

    // 修改老师信息的函数
    const updateTeacher = () => {
      nameRef.value = '李老师'; // 修改姓名
      teacherRefs.age.value = 45; // 修改年龄
      teacher.course = '物理'; // 直接修改源对象属性
    };

    return {
      ...teacherRefs, // 将 teacherRefs 解构到模板中
      updateTeacher
    };
  }
};
</script>

3.2 代码解析

toRef 的使用：
- 我们从 teacher 对象中提取了 name 属性，并将其转换为 nameRef。
- 修改 nameRef.value 会同步更新 teacher.name。
toRefs 的使用：
- 我们将 teacher 对象的所有属性转换为 teacherRefs。
- 在模板中通过解构 teacherRefs 来访问 name、age 和 course。
- 修改 teacherRefs.age.value 会同步更新 teacher.age。
直接修改源对象：
- 我们也可以直接修改 teacher.course，因为 teacher 本身是响应式的。
按钮点击事件：
- 点击按钮后，name、age 和 course 都会被修改，并触发视图更新。

4. 修改代码并说明关联关系

4.1 修改代码

假设我们需要添加一个功能：显示老师的教龄（teachingYears），并根据年龄动态计算教龄。

<template>
  <div>
    <h2>老师信息</h2>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>教龄: {{ teachingYears }}</p>
    <p>课程: {{ course }}</p>
    <button @click="updateTeacher">修改老师信息</button>
  </div>
</template>

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

export default {
  setup() {
    const teacher = reactive({
      name: '张老师',
      age: 40,
      course: '数学'
    });

    const nameRef = toRef(teacher, 'name');
    const teacherRefs = toRefs(teacher);

    // 计算教龄
    const teachingYears = computed(() => teacher.age - 22);

    const updateTeacher = () => {
      nameRef.value = '李老师';
      teacherRefs.age.value = 45;
      teacher.course = '物理';
    };

    return {
      ...teacherRefs,
      teachingYears,
      updateTeacher
    };
  }
};
</script>

4.2 关联关系说明

toRef 和 toRefs 的作用：
- toRef 和 toRefs 将响应式对象的属性转换为 ref，使得我们可以更方便地在模板或逻辑中使用这些属性。
- 它们与源对象保持响应式连接，修改 ref 的值会同步更新源对象。
计算属性的使用：
- 我们使用 computed 计算了 teachingYears，它依赖于 teacher.age。
- 当 teacher.age 被修改时，teachingYears 会自动更新。
响应式数据的流动：
- 修改 nameRef.value → 更新 teacher.name → 触发视图更新。
- 修改 teacherRefs.age.value → 更新 teacher.age → 触发 teachingYears 重新计算 → 触发视图更新。
- 直接修改 teacher.course → 触发视图更新。