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 会自动处理引用对象的访问。