如何利用Vue 3的`toRef`与`toRefs`进行解构赋值？

Vue 3 中 toRef 与 toRefs 的解构赋值：深度解析与应用

大家好，欢迎来到本次关于 Vue 3 toRef 和 toRefs 的解构赋值的深度解析讲座。今天我们将深入探讨这两个 API 的作用、原理以及如何在实际项目中灵活运用它们，避免常见误区。

1. toRef：创建响应式引用

toRef 的核心作用是从响应式对象（reactive object）中创建一个指向特定属性的响应式引用（reactive ref）。 这个引用会保持与原始属性的响应性连接。这意味着，修改引用会同步更新原始对象，反之亦然。

语法：

import { reactive, toRef } from 'vue';

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

const nameRef = toRef(state, 'name');

console.log(nameRef.value); // 输出: Alice

nameRef.value = 'Bob';

console.log(state.name); // 输出: Bob

剖析：

• reactive(state) 创建了一个响应式对象 state。任何对 state 属性的修改都会触发 Vue 的响应式系统。
• toRef(state, 'name') 创建了一个 ref 对象 nameRef，它代理了 state.name 的访问和修改。
• 修改 nameRef.value 会直接影响 state.name，反之亦然。

关键点：

• toRef 返回的是一个 ref 对象，因此需要通过 .value 访问其值。
• toRef 创建的引用是 双向绑定 的。
• toRef 仅针对现有属性有效。 如果尝试使用 toRef 创建一个不存在的属性的引用，则会返回 undefined (或在 TypeScript 中报错，如果类型定义正确)。

示例：创建不存在属性的引用

import { reactive, toRef } from 'vue';

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

const ageRef = toRef(state, 'age');

console.log(ageRef.value); // 输出: undefined

// ageRef.value = 30; // 这不会在 state 对象上创建 'age' 属性
console.log(state.age); // 输出: undefined

使用场景：

• 提取响应式对象的单个属性进行传递或使用，同时保持响应性。 这在组件间共享状态时非常有用。
• 在组合式函数中，暴露响应式对象的单个属性，防止直接暴露整个响应式对象。 这样可以更好地控制组件对状态的访问权限。

2. toRefs：批量创建响应式引用

toRefs 的作用是将一个响应式对象转换为一个普通对象，该对象的每个属性都是指向原始对象相应属性的 ref。 换句话说，它将一个响应式对象的所有属性都转换为 ref 对象，并返回一个包含这些 ref 对象的普通对象。

语法：

import { reactive, toRefs } from 'vue';

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

const refs = toRefs(state);

console.log(refs.name.value); // 输出: Alice
console.log(refs.age.value); // 输出: 30

refs.name.value = 'Bob';

console.log(state.name); // 输出: Bob

剖析：

• toRefs(state) 返回一个普通对象 refs。
• refs.name 和 refs.age 都是 ref 对象，分别代理了 state.name 和 state.age 的访问和修改。
• 修改 refs.name.value 会直接影响 state.name，反之亦然。

关键点：

• toRefs 返回的是一个 普通对象，其属性值都是 ref 对象。
• toRefs 创建的引用是 双向绑定 的。
• toRefs 仅针对 响应式对象 有效。 如果传入的是一个普通对象，则会返回一个包含 undefined ref 的对象。
• 如果使用 toRefs 创建一个不存在的属性的引用，则会返回 undefined ref。

示例：传入普通对象

import { reactive, toRefs } from 'vue';

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

const refs = toRefs(state);

console.log(refs.name.value); // 输出: undefined
console.log(refs.age.value); // 输出: undefined

const reactiveState = reactive(state);

const reactiveRefs = toRefs(reactiveState);
console.log(reactiveRefs.name.value); // 输出: Alice
console.log(reactiveRefs.age.value); // 输出: 30

使用场景：

• 在组合式函数中，将响应式对象的多个属性暴露给组件，同时保持响应性。 这使得组件可以方便地访问和修改状态，而无需直接访问整个响应式对象。
• 与解构赋值结合使用，简化模板中的状态访问。

3. 解构赋值与 toRef / toRefs

toRef 和 toRefs 最大的优势在于它们能够与 ES6 的解构赋值完美结合，简化代码并提高可读性。

a. 使用 toRefs 进行解构赋值：

这是最常见的用法。 通过 toRefs 将响应式对象转换为包含 ref 对象的普通对象后，就可以使用解构赋值将这些 ref 对象提取出来，方便在模板中使用。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="incrementAge">Increment Age</button>
  </div>
</template>

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

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

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

function incrementAge() {
  age.value++;
}
</script>

剖析：

• const { name, age } = toRefs(state); 将 state 转换为包含 name 和 age 两个 ref 对象的普通对象，然后使用解构赋值将这两个 ref 对象提取出来。
• 在模板中，可以直接使用 name 和 age，无需再写 .value。 Vue 会自动解包 ref 对象，获取其值。
• incrementAge 函数修改了 age.value，从而更新了 state.age，并触发了组件的重新渲染。

b. 使用 toRef 进行选择性解构赋值：

如果只需要暴露响应式对象的少数几个属性，可以使用 toRef 进行选择性解构赋值。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

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

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

const name = toRef(state, 'name');

function updateName() {
  name.value = 'Bob';
}
</script>

剖析：

• 只选择了 name 属性通过 toRef 创建了 ref 对象。
• 在模板中，可以直接使用 name，无需再写 .value。
• state 对象的其他属性并没有暴露给组件。

c. 解构赋值与计算属性/方法：

可以将 toRefs 的结果与计算属性或方法结合使用，进一步增强组件的灵活性。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <p>Age: {{ age }}</p>
    <button @click="incrementAge">Increment Age</button>
  </div>
</template>

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

const state = reactive({
  firstName: 'Alice',
  lastName: 'Smith',
  age: 30
});

const { firstName, lastName, age } = toRefs(state);

const fullName = computed(() => firstName.value + ' ' + lastName.value);

function incrementAge() {
  age.value++;
}
</script>

剖析：

• fullName 是一个计算属性，它依赖于 firstName 和 lastName 两个 ref 对象。
• 当 firstName 或 lastName 的值发生变化时，fullName 会自动更新。

4. 常见误区与注意事项

• 误区 1：直接解构响应式对象。

  import { reactive } from 'vue';
  
  const state = reactive({
    name: 'Alice',
    age: 30
  });
  
  const { name, age } = state; // 错误！  会失去响应性
  
  name = 'Bob'; // 不会更新 state.name

  直接解构响应式对象会创建普通变量，而不是 ref 对象。 这些变量与原始对象的属性失去了响应性连接。 必须使用 toRefs 或 toRef 来保持响应性。

• 误区 2：在模板中使用 .value。

  在使用 toRefs 解构赋值后，Vue 会自动解包 ref 对象，因此在模板中不需要再写 .value。 如果写了 .value，会导致错误。

• 误区 3：修改 toRefs 返回的对象新增的属性
  因为 toRefs 返回的是一个普通对象，直接在该对象上添加属性并不会将其变成响应式的属性，它不会触发视图更新。要确保属性的响应性，需要直接在原始的响应式对象上进行修改。

• 注意事项 1：类型推断。

  在使用 TypeScript 时，确保正确定义响应式对象的类型。 这样可以帮助你避免类型错误，并获得更好的代码提示。

• 注意事项 2：性能优化。

  如果只需要暴露响应式对象的少数几个属性，使用 toRef 会比 toRefs 更高效。 因为 toRefs 会创建所有属性的 ref 对象，而 toRef 只会创建需要的属性的 ref 对象。

• 注意事项 3：与 ... 展开运算符结合使用。

  toRefs 返回的对象可以与 ... 展开运算符结合使用，方便地将多个状态对象合并到一个对象中。

  import { reactive, toRefs } from 'vue';
  
  const state1 = reactive({
    name: 'Alice',
  });
  
  const state2 = reactive({
    age: 30
  });
  
  const combinedRefs = { ...toRefs(state1), ...toRefs(state2) };

5. 真实案例分析

案例 1：组件间共享状态

假设有两个组件 ComponentA 和 ComponentB 需要共享一个名为 user 的状态对象。

状态管理 (store.js):

import { reactive } from 'vue';

export const userStore = reactive({
  name: 'Alice',
  age: 30,
  city: 'New York'
});

ComponentA.vue:

<template>
  <div>
    <p>Name: {{ name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script setup>
import { toRef } from 'vue';
import { userStore } from './store';

const name = toRef(userStore, 'name');

function updateName() {
  name.value = 'Bob';
}
</script>

ComponentB.vue:

<template>
  <div>
    <p>Age: {{ age }}</p>
    <p>City: {{ city }}</p>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';
import { userStore } from './store';

const { age, city } = toRefs(userStore);
</script>

剖析：

• userStore 是一个全局状态对象。
• ComponentA 使用 toRef 提取了 name 属性，并提供了一个更新 name 的按钮。
• ComponentB 使用 toRefs 提取了 age 和 city 属性。
• 当 ComponentA 更新 name 时，ComponentB 的 name 也会自动更新。

案例 2：在组合式函数中使用 toRefs

假设有一个组合式函数 useUser，它负责管理用户状态。

useUser.js:

import { reactive, toRefs } from 'vue';

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

  function incrementAge() {
    state.age++;
  }

  return {
    ...toRefs(state),
    incrementAge
  };
}

MyComponent.vue:

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="incrementAge">Increment Age</button>
  </div>
</template>

<script setup>
import { useUser } from './useUser';

const { name, age, incrementAge } = useUser();
</script>

剖析：

• useUser 函数使用 reactive 创建了一个响应式状态对象 state。
• useUser 函数使用 toRefs 将 state 转换为包含 ref 对象的普通对象，并将其与 incrementAge 函数一起返回。
• MyComponent 使用解构赋值从 useUser 函数返回的对象中提取 name、age 和 incrementAge。

6. toRef 和 toRefs 的对比

下表总结了 toRef 和 toRefs 的主要区别：

特性	toRef	toRefs
作用	创建单个属性的响应式引用	创建所有属性的响应式引用
返回值	ref 对象	普通对象，其属性值为 ref 对象
目标对象	响应式对象	响应式对象
使用场景	提取单个属性，控制访问权限	批量提取属性，方便模板使用
性能	针对少量属性更高效	针对大量属性可能稍有性能损耗

7. shallowRef 和 shallowReactive与 toRef 和 toRefs 的关系

shallowRef 和 shallowReactive 创建的是浅层响应式对象。这意味着只有顶层属性是响应式的，嵌套对象不会被转换为响应式对象。

当与 toRef 和 toRefs 一起使用时，需要特别注意：

• 如果使用 shallowReactive 创建的对象的属性本身是一个对象，然后使用 toRef 或 toRefs 创建了对该属性的引用，那么修改该属性内部的值不会触发响应式更新。
• shallowRef 创建的 ref，如果其 value 是一个对象，那么修改该对象内部的值不会触发响应式更新。

示例：

import { shallowReactive, toRef, reactive } from 'vue';

const state = shallowReactive({
  nested: {
    count: 0
  }
});

const nestedRef = toRef(state, 'nested');

nestedRef.value.count++; // 不会触发响应式更新

const reactiveState = reactive({
  nested: {
    count: 0
  }
});

const reactiveNestedRef = toRef(reactiveState, 'nested');

reactiveNestedRef.value.count++; // 会触发响应式更新

因此，在使用 shallowRef 和 shallowReactive 时，需要仔细考虑是否需要深层响应式。如果需要深层响应式，则应该使用 reactive 和 ref。

8. 核心总结

toRef 和 toRefs 是 Vue 3 中非常重要的 API，它们能够帮助我们更好地管理和共享响应式状态。通过与解构赋值结合使用，可以简化代码并提高可读性。 理解它们的作用、原理以及常见误区，可以帮助我们编写出更健壮、更高效的 Vue 应用。掌握它们是成为一名优秀的 Vue 开发者的必备技能。

9. 告别迷茫，拥抱清晰

toRef 与 toRefs 犹如精巧的钥匙，解锁了响应式状态的灵活运用。它们赋予我们精确控制响应性的能力，在组件间搭建起稳定高效的数据桥梁，让状态管理不再是难题。