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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908125.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

低压补偿控制器维修措施

低压补偿控制器其主要功能是调节和补偿系统中的低压,确保设备的正常运行和电能的高效利用。然而,随着长时间的使用,低压补偿控制器可能会出现故障,从而影响系统的正常运行。因此,了解低压补偿控制器的维修措施显得尤为…

视频推荐的算法(字节青训)

题目: 西瓜视频 正在开发一个新功能,旨在将访问量达到80百分位数以上的视频展示在首页的推荐列表中。实现一个程序,计算给定数据中的80百分位数。 例如:假设有一个包含从1到100的整数数组,80百分位数的值为80&#…

lora训练模型 打造个人IP

准备工作 下载秋叶炼丹器整理自己的照片下载底膜 https://rentry.org/lycoris-experiments 实操步骤 解压整合包 lora-scripts,先点击“更新” 训练图片收集 比如要训练一个自己头像的模型,就可以拍一些自己的照片(20-50张,最少15张&…

qt QBrush详解

1、概述 QBrush是Qt框架中的一个基本图形对象类,它主要用于定义图形的填充模式。QBrush可以用于填充如矩形、椭圆形、多边形等形状,也可以用于绘制背景等。通过QBrush,可以设置填充的颜色、样式(如实心、渐变、纹理等&#xff09…

《C#语法一篇通》,20万字,48小时阅读,持续完善中。。。

本文摘录了C#语法的主要内容,接近20万字。 所有鸡汤的味道都等于马尿! 如果你相信任何所谓的鸡汤文章,智商堪忧。 计算机语言没有”好不好“之说,骗子才会告诉你哪个语言好,学好任何一本基础语言(C&#…

radio astronomy 2

地球上的电离层会被太阳风影响。

数字人直播带货前景如何?头部源码厂商的系统能实现哪些功能?

随着数字人直播技术的成熟,以数字人直播带货为代表的应用场景逐渐呈现出常态化的趋势,使得越来越多创业者对该赛道产生兴趣的同时,也让数字人直播带货前景及操作方式成为了他们所重点关注的对象。 从目前的情况来看,就数字人直播带…

华为鲲鹏一体机 安装笔记

安装驱动 在这个链接 社区版-固件与驱动-昇腾社区 1 下载NPU固件 需要注册登录,否则报错: ERR_NO:0x0091;ERR_DES:HwHiAiUser not exists! Please add HwHi AiUser 准备软件包-软件安装-CANN…

【C++】类和对象(十一):友元+内部类+匿名函数

大家好,我是苏貝,本篇博客带大家了解C的友元内部类匿名函数,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 1. 友元1.1 友元函数1.2 友元类 2. 内部类3. 匿名对象 1. 友元 友元提供了一种…

【深度学习】VITS语音合成原理解析

1、前言 呃。。。好多天没更新了,最近 黑神话悟空 相当火啊,看上瘾了。本篇内容,我们来讲一下VITS。 视频:语言合成 & 变声器 ——VITS原理解析①_哔哩哔哩_bilibili 2、VITS 训练图 预测图: 2.1、条件VAE的优…

git 入门作业

任务1: 破冰活动:自我介绍任务2: 实践项目:构建个人项目 git使用流程: 1.将本项目直接fork到自己的账号下,这样就可以直接在自己的账号下进行修改和提交。 这里插一条我遇到的问题,在fork的时候没有将那个only camp4的…

再探“构造函数”(2)友元and内部类

文章目录 一. 友元‘全局函数’作友元‘成员函数’作友元‘类‘作友元 内部类 一. 友元 何时会用到友元呢? 当想让(类外面的某个函数/其它的类)访问 某个类里面的(私有或保护的)内容时,可以选择使用友元。 友元提供了一种突破&a…

从零到一构建C语言解释器-CPC源码

文章目录 参考框架设计vm指令集分配空间词法分析语法分析递归下降表达式优先级爬山 参考 https://lotabout.me/2015/write-a-C-interpreter-1/ https://github.com/archeryue/cpc https://www.bilibili.com/video/BV1Kf4y1V783/?vd_sourcea1be939c65919194c77b8a6a36c14a6e …

关于我、重生到500年前凭借C语言改变世界科技vlog.14——常见C语言算法

文章目录 1.冒泡排序2.二分查找3.转移表希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力! 根据当前所学C语言知识,对前面知识进行及时的总结巩固,出了这么一篇 vlog 介绍当前所学知识能遇到的常见算法,这些算法是…

我也谈AI

“随着人工智能技术的不断发展,我们已经看到了它在各行业带来的巨大变革。在医疗行业中,人工智能技术正在被应用于病例诊断、药物研发等方面,为医学研究和临床治疗提供了新的思路和方法;在企业中,人工智能技术可以通过…

Flutter 13 网络层框架架构设计,支持dio等框架。

在移动APP开发过程中,进行数据交互时,大多数情况下必须通过网络请求来实现。客户端与服务端常用的数据交互是通过HTTP请求完成。面对繁琐业务网络层,我们该如何通过网络层架构设计来有效解决这些问题,这便是网络层框架架构设计的初…

Spring Boot2.x教程:(十)从Field injection is not recommended谈谈依赖注入

从Field injection is not recommended谈谈依赖注入 1、问题引入2、依赖注入的三种方式2.1、字段注入(Field Injection)2.2、构造器注入(Constructor Injection)2.3、setter注入(Setter Injection) 3、为什…

Nginx的基础架构解析(下)

1. Nginx模块 1.1 Nginx中的模块化设计 Nginx 的内部结构是由核心部分和一系列的功能模块所组成。这样划分是为了使得每个模块的功能相对简单,便于开发,同时也便于对系统进行功能扩展。Nginx 将各功能模块组织成一条链,当有请求到达的时候&…

【网络】网络层协议IP

目录 IP协议报头 报头分离和向上交付 四位版本 8位服务类型 16位总长度 八位生存时间 16位标识一行 网段划分 DHCP 私有IP范围 公网划分之CIDR 特殊的IP地址 缓解IP地址不够用的方法 NAT技术 路由 IP是用来主机定位和路由选择的,它提供了一种能力&am…

HTML 基础标签——多媒体标签<img>、<object> 与 <embed>

文章目录 1. `<img>` 标签主要属性示例注意事项2. `<object>` 标签概述主要属性示例注意事项3. `<embed>` 标签概述主要属性示例注意事项小结在现代网页设计中,多媒体内容的使用变得越来越重要,因为它能够有效增强用户体验、吸引注意力并传达信息。HTML 提…