Vue 3 中 ref 和 reactive 的区别是什么？

推荐答案

在 Vue 3 中，ref 和 reactive 是两种用于创建响应式数据的 API，但它们的使用场景和行为有所不同。

• ref：用于创建一个响应式的引用值，通常用于基本数据类型（如 string、number、boolean 等）。ref 返回一个包含 value 属性的对象，访问或修改数据时需要通过 .value 来操作。

• reactive：用于创建一个响应式的对象或数组，适用于复杂数据类型（如对象、数组等）。reactive 直接返回一个响应式代理对象，可以直接访问或修改其属性。

本题详细解读

ref 的使用场景与特点

1. 基本数据类型：ref 主要用于处理基本数据类型，例如：

   const count = ref(0);
   console.log(count.value); // 0
   count.value++; // 修改值

2. .value 访问：ref 返回的对象需要通过 .value 来访问或修改数据，这是因为 ref 内部将值包装在一个对象中，以确保响应性。

3. 模板中使用：在模板中使用 ref 时，Vue 会自动解包，无需使用 .value：

   <template>
     <div>{{ count }}</div>
   </template>

reactive 的使用场景与特点

1. 复杂数据类型：reactive 主要用于处理对象或数组，例如：

   const state = reactive({ count: 0 });
   console.log(state.count); // 0
   state.count++; // 修改值

2. 直接访问：reactive 返回的代理对象可以直接访问或修改其属性，无需额外的 .value。

3. 嵌套对象：reactive 会递归地将对象的所有嵌套属性转换为响应式数据，而 ref 不会自动处理嵌套对象的响应性。

区别总结

使用建议

• 如果需要处理基本数据类型，或者需要一个简单的响应式值，使用 ref。
• 如果需要处理复杂的对象或数组，并且希望直接访问属性，使用 reactive。