Vue - 深入理解 Vue 3 中的 ref 和 reactive

深入理解 Vue 3 中的 ref 和 reactive

Vue 3 引入了一个全新的响应式系统，使得数据的变化能够自动反映到视图中。对于开发者来说，理解如何使用响应式 API 是掌握 Vue 3 的关键。本文将重点介绍 Vue 3 中的两个核心响应式 API — ref 和 reactive，并理解它们的区别、使用场景以及如何在实际项目中有效利用它们。

1. Vue 3 响应式系统概述

Vue 3 的响应式系统基于 Proxy 对象实现，它使得我们可以轻松地创建和管理响应式数据。在 Vue 3 中，所有的响应式数据都可以通过 ref 或 reactive 来创建。在本篇博客中，我们将详细探讨这两者的使用方法和区别。

2. ref - 基本数据类型的响应式

ref 是 Vue 3 中用来创建基本数据类型（如 string、number、boolean 等）响应式数据的工具。当需要将单一值（例如一个数字或字符串）变成响应式时，ref 是最适合的选择。

使用方式

ref 返回一个对象，这个对象的值存储在 .value 属性中。因此，当需要访问或修改 ref 中存储的值时，需要通过 .value 来进行操作。

import { ref } from 'vue';

// 创建一个响应式数字
const count = ref(0);

// 修改值时使用 .value
count.value++;

// 在模板中可以直接使用 count

在上面的代码中，我们通过 ref 创建了一个响应式数字 count，并使用 .value 来修改它的值。

ref 适用于以下情况：

• 当需要存储基本数据类型时（例如 number、string、boolean）。

3. reactive - 对象和数组的响应式

与 ref 不同，reactive 用于处理对象和数组。它会对整个对象或数组的每个属性进行响应式处理，因此你无需通过 .value 来访问这些属性。

使用方式

reactive 直接返回一个响应式对象，不需要使用 .value。它会自动将对象或数组的所有属性变为响应式的，并能在视图中跟踪变化。

import { reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  name: 'Tom'
});

// 直接修改对象的属性，无需 .value
state.count++;

// 在模板中直接使用 state.count

在这个例子中，我们使用 reactive 创建了一个响应式的对象 state，并且可以直接修改它的属性。

reactive 适用于以下情况：

• 当需要处理对象或数组，并希望它们的属性都变成响应式时。
• 当不想通过 .value 来访问数据时，直接访问对象的属性。

4. toRefs

在 Vue 3 中，toRefs 是一个非常有用的工具，通常用于将 reactive 对象的属性解构成响应式引用。当使用 reactive 创建一个对象时，直接解构该对象会导致它失去响应性，因为解构后的变量不再是响应式的。而使用 toRefs 则可以保留对象属性的响应性。

import { reactive, toRefs } from 'vue';

const data = reactive({
  queryParams: {},
  form: {},
  rules: []
});

// 使用 toRefs 保证解构后的属性是响应式的
const { queryParams, form, rules } = toRefs(data);

在上面的代码中，toRefs 可以确保解构后的 queryParams、form 和 rules 依然保持响应式。

当然！即使使用了 toRefs 来解构响应式对象，queryParams 和 form 这些属性依然是 ref 类型的。因此，访问它们的内部数据时，仍然需要使用 .value 来访问。

总结

Vue 3 的响应式系统是其最强大的特性之一，ref 和 reactive 是两个重要的工具。它们之间有一些明显的区别，但也可以根据实际需要结合使用。理解它们的使用场景和差异，有助于我们在开发中编写更简洁、更高效的代码。