vue3 ref与reactive的区别

ref

• 用途: ref 主要用于创建对基本类型（如字符串、数字、布尔值等）的响应式引用，同时也可以用于包装对象，使其变得响应式。

• 类型: ref 返回一个包含单一值的响应式对象，这个对象有一个 .value 属性来存储实际值。

• 适用场景: 当你需要处理简单的基本类型或希望明确表示某个值是一个响应式引用时，使用 ref。

import { ref } from 'vue';
// 创建一个响应式基本类型
const count = ref(0);
// 修改值
count.value++;
// 包装对象
const state = ref({ foo: 'bar' });
// 修改对象属性
state.value.foo = 'baz';
​
console.log(count.value); // 输出: 1
console.log(state.value); // 输出: { foo: 'baz' }

reactive

• 用途: reactive 用于创建响应式对象，包括嵌套的对象和数组。

• 类型: reactive 返回一个响应式代理对象，你可以像普通对象一样直接操作它。

• 适用场景: 当你需要处理复杂的对象结构，包括嵌套对象和数组时，使用 reactive。

import { reactive } from 'vue';
​
// 创建一个响应式对象
const state = reactive({
  count: 0,
  nested: {
    foo: 'bar'
  }
});
​
// 修改对象属性
state.count++;
state.nested.foo = 'baz';
​
console.log(state.count); // 输出: 1
console.log(state.nested.foo); // 输出: 'baz'

主要区别

1. 数据类型:

   • ref 适用于基本类型和希望显式管理的响应式引用。

   • reactive 适用于复杂对象和嵌套结构。

2. 访问方式:

   • ref 的值通过 .value 属性访问。

   • reactive 的属性直接作为对象属性访问。

3. 内部实现:

   • ref 是通过包装一个对象来实现响应式行为的，基本类型会被封装在一个对象中。

   • reactive 是通过 Proxy 代理整个对象来实现响应式的。

使用建议

• 对于简单的基本类型值，或者你需要一个单一响应式引用时，使用 ref。

• 对于复杂的对象，尤其是包含嵌套对象或数组的情况，使用 reactive 更加自然和方便。

组合使用

在实际开发中，有时候需要将 ref 和 reactive 结合使用。例如，你可能有一个复杂的对象，但其中某些特定的属性需要单独处理为响应式引用：

import { ref, reactive } from 'vue';
​
const state = reactive({
  count: ref(0),
  nested: {
    foo: 'bar'
  }
});
// 修改 count
state.count.value++;
// 修改 nested 对象
state.nested.foo = 'baz';
console.log(state.count.value); // 输出: 1
console.log(state.nested.foo); // 输出: 'baz'