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

【ref、toRef、toRefs、reactive】

在 Vue3 的组合式 API 中,reftoReftoRefsreactive 都是用于创建响应式数据的核心 API,但它们的使用场景和特性有所不同。以下是详细对比:

1. reactive

用于将对象或数组转换为响应式数据(基于 Proxy 实现),直接操作原始对象的属性即可触发响应式更新。

特点:
  • 仅对对象/数组有效,对基本类型(number、string 等)无效。
  • 响应式是“深层的”:对象的嵌套属性也会被转为响应式。
  • 直接返回原始对象的 Proxy 代理,操作时可直接修改属性。
示例:
import { reactive } from 'vue'const user = reactive({name: 'Alice',age: 20
})// 直接修改属性,会触发响应式更新
user.age = 21 // 嵌套对象也会响应式
user.address = reactive({ city: 'Beijing' })
user.address.city = 'Shanghai' // 触发更新
注意:
  • 不能直接替换整个对象(会丢失响应式):
    user = { name: 'Bob' } // 错误!此时 user 不再是响应式
    
  • 解构赋值会丢失响应式(因为解构后得到的是普通值):
    const { name } = user 
    name = 'Bob' // 不会触发更新
    

2. ref

用于将基本类型(number、string、boolean 等)转换为响应式数据,也可用于对象(但内部会自动用 reactive 处理)。

特点:
  • 通过 .value 属性访问/修改值(在模板中使用时无需 .value,Vue 会自动解析)。
  • 对基本类型和对象都有效:
    • 基本类型:内部用一个对象包裹({ value: 原始值 })实现响应式。
    • 对象类型:内部会调用 reactive 转为响应式对象,.value 等价于 reactive 的返回值。
示例:
import { ref } from 'vue'// 基本类型
const count = ref(0)
count.value++ // 修改值(需用 .value)
console.log(count.value) // 1// 对象类型
const user = ref({ name: 'Alice' })
user.value.age = 20 // 等价于 reactive 操作(无需再次 ref)
优势:
  • 统一基本类型和对象的响应式处理方式。
  • 解构时不会丢失响应式(需配合 .value)。

3. toRef

用于将响应式对象的某个属性转换为独立的 ref 对象,保持与原对象的关联(修改该 ref 会同步影响原对象)。

特点:
  • 接收两个参数:toRef(响应式对象, 属性名)
  • 返回的 ref 与原对象属性“双向绑定”:修改 ref.value 会同步更新原对象,原对象属性变化也会同步到 ref
  • 即使原对象属性不存在,也会创建一个 ref(避免 undefined 错误)。
示例:
import { reactive, toRef } from 'vue'const user = reactive({name: 'Alice',age: 20
})// 将 user.age 转为 ref
const ageRef = toRef(user, 'age')ageRef.value = 21 // 修改 ref,原对象同步更新 → user.age = 21
user.age = 22 // 原对象修改,ref 同步更新 → ageRef.value = 22
用途:
  • 当需要传递响应式对象的单个属性时,避免解构丢失响应式。
  • 例如在组件传参时,传递 toRef(user, 'name') 比直接传递 user.name 更可靠。

4. toRefs

用于将响应式对象的所有属性批量转换为 ref 对象,返回一个包含这些 ref 的普通对象(键为原属性名,值为对应 ref)。

特点:
  • 接收一个响应式对象,返回一个新对象,其每个属性都是 toRef 生成的 ref
  • 所有 ref 与原对象保持双向绑定,修改任何一方都会同步。
示例:
import { reactive, toRefs } from 'vue'const user = reactive({name: 'Alice',age: 20
})// 批量转换所有属性为 ref
const userRefs = toRefs(user)
// userRefs 结构:{ name: ref('Alice'), age: ref(20) }// 修改 ref,原对象同步更新
userRefs.age.value = 21 → user.age = 21// 原对象修改,ref 同步更新
user.name = 'Bob' → userRefs.name.value = 'Bob'
用途:
  • 解决 reactive 对象解构丢失响应式的问题:
    // 解构后仍保持响应式
    const { name, age } = toRefs(user)
    name.value = 'Bob' // 触发更新
    
  • 在组件中返回响应式数据时,方便批量暴露属性(避免逐个写 toRef)。

总结:核心区别与使用场景

API作用特点适用场景
reactive对象/数组转为响应式深层响应式,直接操作属性管理复杂对象/数组的响应式状态
ref基本类型/对象转为响应式通过 .value 访问,统一处理方式管理基本类型,或需要明确响应式的对象
toRef单个属性转为 ref与原对象双向绑定传递响应式对象的单个属性,避免解构丢失
toRefs所有属性批量转为 ref批量处理,保持双向绑定解构响应式对象,同时保留各属性的响应式

最佳实践

  • 基本类型用 ref,对象/数组优先用 reactive
  • 解构 reactive 对象时,用 toRefs 保持响应式。
  • 传递单个属性时,用 toRef 避免丢失响应式关联。
  • 在模板中使用时,reftoRef/toRefs.value 可省略,直接使用变量名。
http://www.lryc.cn/news/615659.html

相关文章:

  • 多级缓存详解
  • 《励曼旋耕》Liman Rotary Tillage
  • Python如何合并两个Excel文件
  • 花生4CL基因家族鉴定及对干旱与盐胁迫响应分析--文献精读157
  • 本地进行语音文字互转
  • CVPR中深度学习新范式:通用性、鲁棒性与多模态的创新突破
  • 分布式事务Seata TCC模式篇
  • Linux网络转发系统框架分析
  • 【密码学】7. 数字签名
  • orcad的操作(1)
  • 【LLM】Openai之gpt-oss模型和GPT5模型
  • 【unitrix数间混合计算】2.9 小数部分特征(t_non_zero_bin_frac.rs)
  • DAY35打卡
  • 【js】判断异步函数的返回值要加await
  • 【机器学习深度学习】模型选型:如何根据现有设备选择合适的训练模型
  • Redis面试题及详细答案100道(01-15) --- 基础认知篇
  • 力扣 30 天 JavaScript 挑战 第二题笔记
  • 服务器硬件电路设计之I2C问答(二):I2C总线的传输速率与上拉电阻有什么关系?
  • 常用信号深度解析(SIGINT、SIGPIPE、SIGALRM、SIGTERM等)
  • Java安全-组件安全
  • 谷歌搜索 sg_ss 逆向分析
  • nginx的安装
  • 智能的本质
  • Linux之shell脚本篇(四)
  • 【工具变量】地市人力资本水平数据集(2003-2023年)
  • 9. 堆和栈有什么区别
  • 健全性测试(Sanity Testing):你软件的快速“体检” ✅(省时避坑,确保核心!)
  • PID学习笔记1
  • 复现论文关于3-RPRU并联机器人运动学建模与参数优化设计
  • QT环境搭建