Vue 3 引入了一个全新的响应式系统，其中包含了多个常用的 API，例如：ref, reactive, watchEffect, watch, 和 computed。这些 API 在 Vue 3 中广泛应用，帮助开发者管理和响应数据的变化。在这篇文章中，我们将详细解析这些 API 的作用、使用场景和它们之间的区别，并通过表格直观地对比它们，帮助大家快速掌握如何使用这些函数。

一、ref

定义与作用

ref 是 Vue 3 中用来创建响应式引用的函数，适用于基本数据类型或需要包装的对象。它返回一个对象，这个对象包含一个 .value 属性，您可以通过 .value 来访问或修改其值。

使用场景

• 基本数据类型（如 string, number, boolean）需要被响应式处理时使用。
• DOM 引用：在模板中使用 ref 来绑定 DOM 元素。

示例代码

javascript
import { ref } from 'vue';

const count = ref(0); // 基本数据类型
const message = ref("Hello Vue");

console.log(count.value); // 获取值
count.value = 10; // 修改值

二、reactive

定义与作用

reactive 用于将一个对象或数组转换为响应式对象。与 ref 不同的是，reactive 直接操作对象本身，而不需要使用 .value。

使用场景

• 复杂对象（例如数组和对象）需要响应式处理时使用。
• 可以避免通过 .value 访问和修改属性，简化代码。

示例代码

javascript
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: "Hello Vue"
});

state.count++; // 直接修改属性
console.log(state.count); // 获取属性值

三、computed

定义与作用

computed 用于创建计算属性，返回的是一个基于响应式数据计算出的值。它会缓存计算结果，只有依赖的数据发生变化时，才会重新计算。

使用场景

• 用于派生数据，避免重复计算。
• 性能优化：缓存计算结果，减少不必要的重新计算。

示例代码

javascript
import { reactive, computed } from 'vue';

const state = reactive({
  count: 0
});

const doubledCount = computed(() => state.count * 2);

console.log(doubledCount.value); // 计算并获取值
state.count = 2;
console.log(doubledCount.value); // 值会自动更新

四、watch

定义与作用

watch 用于观察一个或多个响应式数据的变化，并在变化时执行回调函数。它适合在需要响应数据变化时执行副作用的场景。

使用场景

• 需要对数据变化做出反应时。
• 在数据变化时执行异步操作或复杂逻辑。

示例代码

javascript
import { reactive, watch } from 'vue';

const state = reactive({
  count: 0
});

watch(
  () => state.count,  // 观察的目标
  (newValue, oldValue) => { // 回调函数
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

state.count = 5; // count 发生变化，watch 会触发

五、watchEffect

定义与作用

watchEffect 是一个自动跟踪依赖项的函数，不需要显式指定需要观察的响应式数据。它会在副作用函数内自动跟踪所有的响应式数据，并在数据发生变化时重新执行该函数。

使用场景

• 适用于简单的副作用，比如响应式地更新 DOM 或发起 API 请求。
• 无需指定依赖，更简单的 API，适用于开发者希望自动追踪依赖的情况。

示例代码

javascript
import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0
});

watchEffect(() => {
  console.log(`count is now: ${state.count}`);
});

state.count = 1; // 触发副作用

六、对比表格

API	类型	主要特点	使用场景	代码示例
ref	基本数据类型	用于包装基本类型数据，返回 .value	用于基本类型数据（number, string, boolean）	const count = ref(0); count.value = 10;
reactive	对象/数组	用于包装对象或数组，返回对象本身	用于对象或数组的响应式处理	const state = reactive({ count: 0 });
computed	计算属性	用于基于其他数据计算的属性，自动缓存	用于派生数据并优化性能	const doubled = computed(() => state.count * 2);
watch	响应式数据	用于响应数据变化并执行副作用	需要在数据变化时执行副作用（如 API 请求）	watch(() => state.count, (newValue) => {...});
watchEffect	自动依赖追踪	自动追踪依赖，执行副作用函数	简单的副作用，如更新 DOM 或监听简单变化	watchEffect(() => { console.log(state.count); });

七、React 中的类似函数

在 React 中，也有类似的机制用于响应式数据和副作用处理。以下是 Vue3 和 React 中相似功能的对比：

Vue 3	React	描述
ref	useState	useState 用于定义和管理组件的状态。类似于 ref，它使数据变得响应式。
reactive	useState 或 useReducer	useState 和 useReducer 用于管理对象或数组类型的状态。
computed	useMemo	useMemo 用于缓存计算结果，避免不必要的重新计算。
watch	useEffect	useEffect 用于执行副作用，可以观察特定状态的变化。
watchEffect	useEffect	useEffect 会自动追踪状态并执行副作用。区别在于 Vue 中 watchEffect 是自动追踪依赖的。

在 React 中，useEffect 和 useMemo 是最常用的副作用和计算缓存机制，而 useState 则是用来管理响应式数据的核心工具。与 Vue 不同，React 更加依赖于 Hook 的组合来实现响应式和副作用处理。

结语

通过掌握 Vue 3 中的 ref, reactive, watchEffect, watch, 和 computed 等 API，开发者可以更加灵活高效地管理响应式数据和副作用。在实际开发中，根据不同的场景选择合适的 API，可以帮助提高代码的可维护性和性能。

同时，理解 React 中的类似函数，如 useState, useMemo, useEffect，有助于跨框架开发者更好地理解不同框架中的响应式编程模型。希望这篇文章能够帮助你更深入地理解 Vue 3 的响应式系统，并提升你的开发效率！