玩转 Vue 3 Composition API 的技巧（一）：揭秘 Ref 与 Reactive 的使用奥秘

2023-10-05 04:52:54

揭开 Ref 与 Reactive 的神秘面纱

在 Vue 3 中，Composition API 为我们带来了强大的响应式编程能力，Ref 和 Reactive 就是其中不可或缺的两个特性。它们都是用来管理响应式数据的，但用法和适用场景却大不相同。

1. Ref 特性：显性调用，清晰明了

Ref 特性的最大特点就是显性调用。它要求你在使用时明确地调用 ref() 函数，才能将一个普通的值转换为响应式值。这在代码中非常显眼，让你一眼就能看出哪些值是被 ref 处理，来做响应式更新。

以下是一个使用 Ref 特性的示例：

const myRef = ref(10);

myRef.value += 5; // 现在 myRef.value 等于 15

在上面的示例中，我们首先使用 ref() 函数创建了一个名为 myRef 的响应式引用，并将它初始化为数字 10。然后，我们通过 myRef.value 访问这个响应式值的原始值，并将其加 5。最后，myRef.value 的值就变成了 15。

2. Reactive 特性：隐式调用，简洁优雅

与 Ref 特性不同，Reactive 特性采用的是隐式调用方式。它不需要你显式地调用任何函数，就能将一个普通对象或数组转换为响应式对象或数组。这使得代码看起来更加简洁和优雅。

以下是一个使用 Reactive 特性的示例：

const myReactiveObject = reactive({
  name: 'John Doe',
  age: 30
});

myReactiveObject.name = 'Jane Doe'; // 现在 myReactiveObject.name 等于 'Jane Doe'

在上面的示例中，我们使用 reactive() 函数创建了一个名为 myReactiveObject 的响应式对象，并初始化了它的两个属性：name 和 age。然后，我们直接通过 myReactiveObject.name 访问并修改了 name 属性的值。这使得代码更加简洁易读。

3. 何时选择 Ref 特性？何时选择 Reactive 特性？

那么，在实际开发中，我们应该如何选择 Ref 特性和 Reactive 特性呢？这里有一些建议：

使用 Ref 特性：
- 当你需要显式地控制响应式值的更新时。
- 当你需要在模板中使用响应式值时。
- 当你需要在组件之间传递响应式值时。
使用 Reactive 特性：
- 当你想要将一个普通对象或数组转换为响应式对象或数组时。
- 当你需要在数据中添加或删除属性时。
- 当你需要在数据中更新嵌套属性时。