当前位置: 首页 > news >正文

vue3中ref和reactive的使用、优化

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


一、基本区别

特性refreactive
类型支持基本类型(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
组合式函数返回值reftoRefs

http://www.dtcms.com/a/273211.html

相关文章:

  • ABP vNext + OpenIddict:多租户授权中心
  • 二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
  • PPT 倒计时工具:把控节奏,掌握时间,超简单超实用让演示游刃有余
  • linux的DNS域名解析服务
  • Python操作redis数据库:终端下载安装命令、redis关键特性说明、redis的数据类型、redis的连接两种方式
  • 模块三:现代C++工程实践(4篇)第三篇《C++与系统编程:Linux内核模块开发入门》
  • 一个编辑功能所引发的一场知识探索学习之旅(JavaScript、HTML)
  • 笔记:CMakeLists基础语法
  • 在Zabbix 7 中配置对Nginx的监控
  • 外呼如何提高接通率
  • Rail开发日志_2
  • burpsuite记录
  • 深入理解oracle ADG和RAC
  • kotlin中集合的用法
  • kotlin中withContext,async,launch几种异步的区别
  • 【Python练习】035. 编写一个函数,实现简单的文本搜索功能
  • CPU调度调度算法
  • 低功耗小尺寸的空间入侵监测报警设备的市场需求方向
  • 【Python常见问题】【路径】路径总是有问题?深度剖析
  • 【JVM|垃圾回收】第二天
  • Transformer模型原理概述
  • 【Linux】Linux 操作系统 - 27 , 进程间通信(三) --System V 共享内存
  • 零基础入门物联网-远程门禁开关:硬件介绍
  • 多线程学习
  • 指针的const应用
  • 老式MVC架构Web应用:经典框架下的技术坚守与现代挑战
  • STM32F103C8T6驱动无源蜂鸣器详解:从硬件设计到音乐播放
  • 使用SpringAOP自定义权限控制注解
  • 从零开始的语言模型构建 CS336 第一课(一)
  • 【Python练习】036. 编写一个函数,将一个字符串中的所有字符按ASCII值排序