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

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,用于批量设置多个数据为响应式数据。

http://www.kler.cn/a/380273.html

相关文章:

  • qt QMenuBar详解
  • Rust 力扣 - 1423. 可获得的最大点数
  • 软设师知识点-计算机网络
  • P11233 [CSP-S 2024] 染色 题解
  • Centos7.6离线安装软件
  • Centos8安装软件失败更换镜像源
  • IoTDB时序数据库使用
  • R 环境安装
  • 103 - Lecture 2 Table and Data Part 1
  • 初识JDBC
  • 深度学习基础知识-全连接层
  • Spring Cloud OpenFeign:基于Ribbon和Hystrix的声明式服务调用
  • python之正则表达式总结
  • 一键AI换衣-可图AI试衣
  • qt QSplitter详解
  • MySQL 索引的底层实现原理与优化策略
  • python 爬虫0基础入门 (爬虫基础知识)
  • 深度学习中的迁移学习
  • 使用Kafka构建大规模消息传递系统
  • SpringBoot+Shirp的权限管理
  • 云专线优势有哪些?对接入网络有什么要求?
  • Vue3 keep-alive核心源码的解析
  • C++ | Leetcode C++题解之第537题复数乘法
  • 麦麦Docker笔记(一)
  • masm汇编字符输入输出演示
  • 数字身份发展趋势前瞻:去中心化身份