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,用于批量设置多个数据为响应式数据。
相关推荐
亿元程序员1 分钟前
你知道三国志战略版是怎么实现横竖屏动态切换的吗?
前端
BD_Marathon3 分钟前
Vue3_双向绑定
前端·javascript·vue.js
小白学大数据10 分钟前
Temu 商品历史价格趋势爬虫与分析
开发语言·javascript·爬虫·python
仰望.12 分钟前
vue 甘特图 vxe-gantt 手动增加一条依赖线,删除连接线的用法
vue.js·甘特图·vxe-ui·vxe-gantt
霍理迪13 分钟前
CSS复合、关系、属性、伪类选择器
前端·javascript·css
棒棒的唐14 分钟前
Avue2图片上传使用object对象模式时,axios的请求模式用post还是get?
开发语言·前端·javascript·avue
OnlyEasyCode19 分钟前
Linux部署Nginx前后端web教程
linux·前端·nginx
亮子AI20 分钟前
【Typescript】未知类型如何处理?
linux·javascript·typescript
梵得儿SHI20 分钟前
Vue Router 路由管理从入门到精通:基础、导航与参数传递实战(含避坑指南)
前端·javascript·vue.js·路由基础配置·版本适配·路由实例创建·路由规则定义
IT_陈寒23 分钟前
JavaScript 性能优化实战:7 个让你的应用提速 50%+ 的 V8 引擎技巧
前端·人工智能·后端