Vue中ref、reactive、toRef、toRefs的区别

一、ref、reactive

setup 函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变为响应式的变量 ,需要使用 ref reactive 函数修饰变量。

  • ref 函数可以把基本类型变量变为响应式引用
  • reactive 函数可以把复合类型的变量变为响应式的引用。

1.ref

  • ref用于为数据添加响应式状态,本质是将一个数据变成一个对象,这个对象具有响应式特点。
  • 获取数据值需要加.value
  • 因为reactive只能传入对象类型的参数,所以基本数据类型添加响应式状态只能用ref(ref也可以定义复杂的数据)
    ref底层使用的是proxy代理函数实现双向绑定,proxy 函数必须要接收一个对象,如果想修改 name 的值,需要使用 name.value。

2.relative

二、toRef、toRefs

1.toRef:

  • 只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法
  • toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性。
    toRef当数据发生改变时,界面不会自动更新
  • 获取数据值需要加.value

2.toRefs

  • 我们希望将对象的多个属性都变成响应式数据,并且要求响应式数据和原始数据关联,并且更新响应式数据的时候不更新界面,就可以使用toRefs,用于批量设置多个数据为响应式数据。
相关推荐
李想AI几秒前
在Windows系统中使用Claude code的保姆级教程,附带白嫖100美金的Claude API
前端
G等你下课2 分钟前
React 事件机制原理
前端·react.js
Pedantic7 分钟前
为什么 Swift 字符串不能用 `myString[3]` 随便取字符?
前端·后端
RichardLai889 分钟前
Kotlin Flow:构建响应式流的现代 Kotlin 之道
android·前端·kotlin
Apifox10 分钟前
提交代码后如何自动触发 Apifox 的自动化测试?
前端·后端·测试
qiyue7712 分钟前
AI编程专栏(四) - 提示词技术,如何写编程提示词
前端·ai编程
DoraBigHead15 分钟前
【JS三兄弟谁是谁】搞懂 splice、slice、split,只需一杯奶茶的时间!
前端·javascript·面试
国家不保护废物16 分钟前
前端存储与后端服务的奇妙冒险:一个Node.js服务器的诞生记(cookie实现用户登入)
前端·javascript·后端
前端付豪16 分钟前
2、前端架构三要素:模块化、工程化、平台化
前端·javascript·架构
遂心_17 分钟前
深入剖析React待办事项应用:Hooks、组件化与性能优化实战
前端·react.js·前端框架