Vue中的ref与reactive

时间：2024-04-14 09:33:48

在 Vue 中，ref 和 reactive 是用于处理响应式数据的两个不同的 API。

1. ref

  ref 是 Vue 3 中引入的 API，用于创建一个响应式的引用对象。它接收一个初始值作为参数，并返回一个包含了一个 .value 属性的对象。这个 .value 属性持有着实际的值，并且当该值发生变化时，相关的组件会被通知到。ref 通常用于处理简单的数据类型，如字符串、数字、布尔值等。

  示例代码：


import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出：0

count.value += 1; // 修改值
console.log(count.value); // 输出：1

2. reactive

  reactive 是 Vue 2 和 Vue 3 中都存在的 API，用于创建一个响应式的对象。它接收一个普通的 JavaScript 对象，并返回一个包装后的响应式代理对象。这个代理对象会追踪对象内部属性的变化，并在变化时通知相关的组件进行更新。reactive 可以处理包含嵌套属性的复杂对象。

示例代码：


import { reactive } from 'vue';

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

console.log(state.count); // 输出：0

state.count += 1; // 修改值
console.log(state.count); // 输出：1

  使用 ref 和 reactive 可以根据数据的复杂程度来选择合适的 API。对于简单的数据类型，使用 ref 更加直观和方便。而对于复杂的对象，使用 reactive 可以更好地处理对象内部属性的变化。

3. 何时应该使用ref，何时应该使用reactive？

3.1 使用 ref 的情况：

  • 简单数据类型：当处理简单的数据类型（如字符串、数字、布尔值）时，可以使用 ref。它会为数据创建一个响应式引用对象，并通过 .value 属性访问和修改值。
  • 单个数据：当需要处理单个数据，并且只有一个相关的组件需要访问和修改该数据时，使用 ref 更加直观和方便。
    示例：
import { ref } from 'vue';

const count = ref(0); // 响应式引用对象

console.log(count.value); // 访问值
count.value += 1; // 修改值

3.2 使用 reactive 的情况：

  • 复杂对象：当处理复杂对象（包含多个嵌套属性）时，可以使用 reactive。它会创建一个响应式的代理对象，可以自动追踪对象内部属性的变化。
  • 多个组件访问：当多个组件需要访问和修改同一个数据对象时，使用 reactive 可以确保它们都能正确地响应数据的变化。
      示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Alice'
}); // 响应式代理对象

console.log(state.count); // 访问属性
state.count += 1; // 修改属性

  需要注意的是，无论是使用 ref 还是 reactive，在模板中访问数据时都不需要使用 .value。Vue 会自动处理引用对象的访问。

相关文章