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);
三、性能优化建议
-
避免不必要的嵌套响应性
- 不要对大型对象或频繁更新的对象过度使用
reactive
,可以用ref
替代部分字段。
- 不要对大型对象或频繁更新的对象过度使用
-
控制响应式范围
- 将不参与视图更新的数据从响应式对象中剥离出来,减少 Vue 的追踪开销。
-
使用
shallowRef
/shallowReactive
降低开销- 如果对象层级较深但只需要顶层响应性,可使用浅层响应式:
const obj = shallowReactive({ a: { b: 1 } }); // obj.a 的变化不会触发更新
- 如果对象层级较深但只需要顶层响应性,可使用浅层响应式:
-
避免在模板中频繁调用
ref.value
- 在模板中直接使用
ref
会自动解包,无需写.value
,提高可读性和性能。
- 在模板中直接使用
四、最佳实践总结
场景 | 推荐使用 |
---|---|
基本类型响应式 | ref |
复杂对象/表单 | reactive + toRefs |
跨组件共享状态 | ref |
性能敏感场景 | shallowRef / shallowReactive |
组合式函数返回值 | ref 或 toRefs |