vue3中ref和reactive的使用、优化

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


一、基本区别

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

二、使用建议与优化

使用 ref 的场景

  • 定义基本类型的响应式变量(如计数器 count = ref(0)
  • 需要将响应式值传递给其他函数或组件,希望保持响应性
  • 在组合式 API 中定义状态变量,便于逻辑复用
js 复制代码
const count = ref(0);
function increment() {
  count.value++;
}

使用 reactive 的场景

  • 对象结构较复杂,需要整体响应性(如表单对象)
js 复制代码
const user = reactive({
  name: 'Alice',
  age: 25
});

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

js 复制代码
const { name, age } = toRefs(user);

三、性能优化建议

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

    • 不要对大型对象或频繁更新的对象过度使用 reactive,可以用 ref 替代部分字段。
  2. 控制响应式范围

    • 将不参与视图更新的数据从响应式对象中剥离出来,减少 Vue 的追踪开销。
  3. 使用 shallowRef / shallowReactive 降低开销

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

      js 复制代码
      const obj = shallowReactive({ a: { b: 1 } });
      // obj.a 的变化不会触发更新
  4. 避免在模板中频繁调用 ref.value

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

四、最佳实践总结

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

相关推荐
独泪了无痕5 分钟前
深入浅析Vue3中的生命周期钩子函数
前端·vue.js
小白白一枚1117 分钟前
vue和react的框架原理
前端·vue.js·react.js
字节逆旅9 分钟前
从一次爬坑看前端的出路
前端·后端·程序员
若梦plus1 小时前
微前端之样式隔离、JS隔离、公共依赖、路由状态更新、通信方式对比
前端
若梦plus1 小时前
Babel中微内核&插件化思想的应用
前端·babel
若梦plus1 小时前
微前端中微内核&插件化思想的应用
前端
若梦plus1 小时前
服务化架构中微内核&插件化思想的应用
前端
若梦plus1 小时前
Electron中微内核&插件化思想的应用
前端·electron
若梦plus1 小时前
Vue.js中微内核&插件化思想的应用
前端
得物技术2 小时前
Java SPI 机制初探|得物技术
javascript