vue ref vs reactive

在 Vue 3 中，reactive 和 ref 是两个用于创建响应式状态的 API。它们在功能上有一些重叠，但在使用和实现上有不同的用途和适用场景。下面是对它们的详细解释和比较：

reactive

• 功能：reactive 函数用于将一个对象转换为响应式对象。这个响应式对象在其属性发生变化时能够自动触发依赖它的组件重新渲染。

• 用法：

  import { reactive } from 'vue';
  
  const state = reactive({
    count: 0,
    name: 'Vue'
  });
  
  state.count++;  // 响应式地增加 count
  state.name = 'Vue 3';  // 响应式地修改 name
  

• 特点：

  • 适用于对象和数组等复杂结构。
  • 对象内的所有属性都是响应式的。
  • 深层嵌套的属性也是响应式的。

ref

• 功能：ref 函数用于创建一个响应式的引用。它可以用来包装一个基本类型（如字符串、数字、布尔值）或者对象。引用的 .value 属性在其发生变化时能够自动触发依赖它的组件重新渲染。

• 用法：

  import { ref } from 'vue';
  
  const count = ref(0);
  
  count.value++;  // 响应式地增加 count
  

  对于对象：

  const user = ref({
    name: 'Vue',
    age: 3
  });
  
  user.value.name = 'Vue 3';  // 响应式地修改 name
  

• 特点：

  • 适用于基本类型（如字符串、数字、布尔值）。
  • 当包装对象时，必须通过 .value 访问和修改属性。
  • 可以用来创建响应式的 DOM 引用。

选择使用 reactive 或 ref 的场景

• 使用 reactive：

  • 当你需要一个响应式对象，并且希望它的所有属性都能响应变化时。
  • 当你需要对一个深层嵌套的对象进行响应式处理时。

• 使用 ref：

  • 当你需要一个响应式的基本类型值（如数字、字符串、布尔值）时。
  • 当你需要一个可以响应变化的引用，并且该引用可能是一个简单值时。
  • 当你需要一个可以与模板中 DOM 元素进行绑定的响应式引用时。

示例比较

使用 reactive：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'Vue',
    age: 3
  }
});

state.count++;  // 响应式
state.user.age = 4;  // 响应式

使用 ref：

import { ref } from 'vue';

const count = ref(0);
const user = ref({
  name: 'Vue',
  age: 3
});

count.value++;  // 响应式
user.value.age = 4;  // 响应式

总的来说，reactive 和 ref 是 Vue 3 中实现响应式编程的两个重要工具。选择哪个 API 主要取决于你的数据结构和使用场景。