vue3中ref和reactive的使用、优化

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的核心 API。它们各有适用场景，合理使用可以提升性能和代码可维护性。

---

一、基本区别

特性	ref	reactive
类型支持	基本类型（string、number 等）或对象	只能是对象（包括数组、Map、Set 等）
访问方式	通过 .value 获取/设置值	直接访问属性
模板中是否自动解包	是（模板中不需要 .value）	否
响应性穿透限制	支持跨组件传递时保持响应性	在解构后会失去响应性

---

二、使用建议与优化

使用 ref 的场景

• 定义基本类型的响应式变量（如计数器 count = ref(0)）
• 需要将响应式值传递给其他函数或组件，希望保持响应性
• 在组合式 API 中定义状态变量，便于逻辑复用

const count = ref(0);
function increment() {
  count.value++;
}

使用 reactive 的场景

• 对象结构较复杂，需要整体响应性（如表单对象）

const user = reactive({
  name: 'Alice',
  age: 25
});

⚠️ 注意：解构 reactive 对象会导致响应性丢失，推荐使用 toRefs：

const { name, age } = toRefs(user);

---

三、性能优化建议

1. 避免不必要的嵌套响应性

   • 不要对大型对象或频繁更新的对象过度使用 reactive，可以用 ref 替代部分字段。

2. 控制响应式范围

   • 将不参与视图更新的数据从响应式对象中剥离出来，减少 Vue 的追踪开销。

3. 使用 shallowRef / shallowReactive 降低开销

   • 如果对象层级较深但只需要顶层响应性，可使用浅层响应式：

     const obj = shallowReactive({ a: { b: 1 } });
     // obj.a 的变化不会触发更新
     

4. 避免在模板中频繁调用 ref.value

   • 在模板中直接使用 ref 会自动解包，无需写 .value，提高可读性和性能。

---

四、最佳实践总结

场景	推荐使用
基本类型响应式	ref
复杂对象/表单	reactive + toRefs
跨组件共享状态	ref
性能敏感场景	shallowRef / shallowReactive
组合式函数返回值	ref 或 toRefs

---