一、Vue3组合式基础[ref、reactive]
一、ref
解释:ref是Vue3通过ES6的Proxy实现的响应式数据,其与基本的js类型不同,其为响应式数据,值得注意的是,reactive可以算是ref的子集,ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处理对象、数组等等)
1.赋值
解释:对于ref赋值和取值的时候的格式都是xxx.value
,但是在vue的模版语法中,无需带上 .value
// 赋值(基本数据类型)
const name = ref()
name.value = 55
const name = ref()
name.value = '555666'
// 赋值(对象)
const name = ref()
name.value = {time: 55
}
console.log(name.value.time)
// 赋值(数组)
const name = ref()
name.value = [{time: 556}
]
console.log(name.value[0].time)
2.取值
解释:这里主要解释,取值操作时,变量的一些变化
- 动态
// 取值(将name里面的value赋值给b) const name = ref() name.value = [{time: 556} ] const b = { time: '' } b.time = name.value console.log(b) // 注意,此时的b已经不再完全是静态对象了,其刚刚被赋值的time对应是动态的Proxy
- 静态
解释:通过for of循环和ES6的解构进行处理,此场景一般用于需要动态数据当中间变量时const name = ref() name.value = [{time: 556} ] const b = { time: '' } b.time = name.value[0].time console.log(b) // b取值时,要直接取到最里面的值就不会导致动态// 例子: const dataRef = ref() // res.data是格式为[]的Proxy dataRef.value = res.data console.log(dataRef) const b = { list: [] } // b.list = dataRef.value console.log(b) for (const i of dataRef.value) {// 解构代码const { goodsId, goodsName } = ib.list.push({ goodsId, goodsName }) } console.log(b) // b此时就是常量
二、reactive
解释:reactive的底层是通过Proxy实现的响应式数据,reactive的响应式是深层次的,reactive一般用来处理对象或者数组(基本数据类型是不允许的)
误区:看下面这些代码,如果在使用下面的代码进行操作(场景比如后端传来数据直接去赋值),其就会导致响应式丢失
let userInfo = reactive([{ name: 'time' }])
console.log(userInfo) // Proxy对象
// 类型场景:直接后端数据进行赋值
userInfo = [{ name: 'luck' }]
console.log(userInfo) // [{ name: 'luck' }] 其为普通数组响应性随之丢失
1.赋值
// 赋值(对象)
const name = reactive({ content: '' })
name.content = '5'
console.log(name)
console.log(name.value.time)
// 赋值(数组)
const name = reactive({ list: [] })
name.list = [5, 6, 7]
console.log(name)
2.取值
解释:这里就不再说动态的例子,其和ref里面讲的大同小异,主要演示一下静态取值,此场景一般用于需要动态数据当中间变量时
// 类型场景:后端发来的数据
const book = [{ id: 0, type: 'm' },{ id: 1, type: 'c' }
]
// 前端静态接收(此场景一般用于需要动态数据当中间变量时)
for (const i of book) {const { id, type } = iconsole.log(id, type)
}
相关文章:
一、Vue3组合式基础[ref、reactive]
一、ref 解释:ref是Vue3通过ES6的Proxy实现的响应式数据,其与基本的js类型不同,其为响应式数据,值得注意的是,reactive可以算是ref的子集,ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处…...
unity网页远程手机游戏Inspector面板proxima
https://www.unityproxima.com/docs...
聊聊spring事务12种场景,太坑了
前言 对于从事java开发工作的同学来说,spring的事务肯定再熟悉不过了。 在某些业务场景下,如果一个请求中,需要同时写入多张表的数据。为了保证操作的原子性(要么同时成功,要么同时失败),避免数…...
mysql 数据查重与查重分页
起因是公司的crm录入不规范,有重复数据。 之后考虑到需要手动处理,首先需要自动找出重复的数据 查重要求: 存在多个不允许重复的字段,任一字段重复,则判断为同一个客户。划分到同一重复组中。 查重sql如下 SELECT C…...
微服务(12)
目录 56.k8s是怎么进行服务注册的? 57.k8s集群外流量怎么访问Pod? 58.k8s数据持久化的方式有哪些? 59.Relica Set和Replication Controller之间有什么区别? 60.什么是Service Mesh(服务网格)&#x…...
iOS实时查看App运行日志
目录 一、设备连接 二、使用克魔助手查看日志 三、过滤我们自己App的日志 📝 摘要: 本文介绍了如何在iOS iPhone设备上实时查看输出在console控制台的日志。通过克魔助手工具,我们可以连接手机并方便地筛选我们自己App的日志。 Ǵ…...
【计算机毕业设计】SSM健身房管理系统
项目介绍 本项目为后台管理系统,主要分为管理员与用户两种角色; 登录页面,管理员首页,会员增删改查,教练增删改查,运动器材管理等功能。 用户角色包含以下功能: 用户登录页面,用户首页,选择课程,选择教练等功能。 环境需要 1.运行环境&a…...
嵌入式Linux之MX6ULL裸机开发学习笔记(IMX启动方式-启动设备的选择)
一,硬件启动方式选择 1.启动方式的选择 6ull支持多种启动方式。 比如可以从 SD/EMMC、 NAND Flash、 QSPI Flash等启动。 6ull是怎么支持多种外置flash启动程序的。 1.启动方式选择: BOOT_MODE0 and BOOT_MODE1,这两个是两个IO来控制的,…...
K8S Ingress-Nginx导出TCP端口
ingress-nginx导出TCP端口 Exposing TCP and UDP services - Ingress-Nginx Controllerhttps://github.com/kubernetes/ingress-nginx/blob/main/docs/user-guide/exposing-tcp-udp-services.md helm upgrade ingress-nginx导出redis 6379端口(这种方式最简单&…...
索引类型-哈希索引
一. 前言 前面我们简单介绍了数据库的B-Tree索引,下面我们介绍另一种索引类型-哈希索引。 二. 哈希索引的简介 哈希索引(hash index) 基于哈希表实现,只有精确匹配索引所有列的查询才有效。对于每一行数据,存储引擎都会对所有索引列计算一个…...
uniapp中组件库的Textarea 文本域的丰富使用方法
目录 #平台差异说明 #基本使用 #字数统计 #自动增高 #禁用状态 #下划线模式 #格式化处理 API #List Props #Methods #List Events 文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等 注意: 由于…...
LLM、AGI、多模态AI 篇三:微调模型
文章目录 系列LLM的几个应用层次Lora技术其他微调技术FreezeP-TuningQLoRA指令设计构建高质量的数据微调步骤系列 LLM、AGI、多模态AI 篇一:开源大语言模型简记 LLM、AGI、多模态AI 篇二:Prompt编写技巧 LLM、AGI、多模态AI 篇三...
IPC之十二:使用libdbus在D-Bus上异步发送/接收信号的实例
IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本 IPC 系列文章的前十篇介绍了几乎所有的常用的 IPC 方法,每种方法都给出了具体实例,前面的文章里介绍了 D-Bus 的基本概念以及调用远程方法的实例,本文介绍 D-Bus…...
ES6之生成器(Generator)
✨ 专栏介绍 在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景&#x…...
Matlab技巧[绘画逻辑分析仪产生的数据]
绘画逻辑分析仪产生的数据 逻分上抓到了ADC数字信号,一共是10Bit,12MHZ的波形: 这里用并口协议已经解析出数据: 导出csv表格数据(这个数据为补码,所以要做数据转换): 现在要把这个数据绘制成波形,用Python和表格直接绘制速度太慢了,转了一圈发现MATLAB很好用,操作方法如下:…...
Go面试题学习
1.并发安全性 Go语言中的并发安全性是什么?如何确保并发安全性? 并发安全性是指在并发编程中,多个goroutine对共享资源的访问不会导致数据竞争和不确定的结果。 使用互斥锁(Mutex):通过使用互斥锁来保护…...
SQL效率-查询条件需避免使用函数处理索引字段
一个sql效率的问题 问题 假设created_at 是date类型、是索引,那么以下2种方式有没效率差异: WHERE TO_CHAR(created_at, ‘YYYY-MM-DD’) ‘2020-02-01’WHERE created_at TO_DATE(‘2020-02-01’ , ‘YYYY-MM-DD’) DBA回复 有的,第一…...
【Spring 篇】Spring:轻松驾驭 Java 世界的利器
在 Java 开发领域,Spring 框架无疑是一颗璀璨的明星,它不仅提供了全面的企业级特性,还为开发者提供了简便而强大的开发方式。本文将深入探讨 Spring 框架的简介、配置和快速入门,带你轻松驾驭 Java 世界的利器。 Spring 简介 Sp…...
八个LOGO素材网站推荐分享
即时设计资源广场 在UI界面设计中,为了找到合适的图标icon,你有没有尝试过翻遍整个网络,找到自己想要的,却无法下载或收费使用?最后,只收集图标icon材料需要半天时间。专业设计师使用的图标icon设计材料“…...
React格式化规范
React并没有特定的格式要求,它允许开发者根据自己的喜好和项目需求来选择代码的格式化风格。然而,在React社区中有一些常见的约定和最佳实践,以下是一些常用的格式化规范和建议: 缩进:使用2个或4个空格来进行缩进&…...
如何利用Conda管理多种虚拟环境与Jupyter Notebook内核切换
写在开头 在数据科学与机器学习领域,项目之间可能存在不同的依赖关系和版本要求。为了有效管理这些差异,使用虚拟环境成为一种标准实践。本文将介绍如何利用Conda这一强大的环境管理工具,结合Jupyter Notebook,使得在不同项目之间灵活切换变得轻而易举。 2. Conda简介 2…...
博客摘录「 什么是QPS、TPS、吞吐量?- 高并发名词概念」2024年1月5日
1.什么是高并发? 高并发(High Concurrency)。通常是指系统在短时间内的大量操作。 高并发相关的常见指标有:QPS、TPS、吞吐量、并发数等。 2.QPS(Query Per Second) QPS每秒查询率,是指系统…...
PTA——逆序的三位数
程序每次读入一个正3位数,然后输出按位逆序的数字。注意:当输入的数字含有结尾的0时,输出不应带有前导的0。比如输入700,输出应该是7。 输入格式: 每个测试是一个3位的正整数。 输出格式: 输出按位逆序…...
ChatGPT怎么帮我上班的
1.解放生产力 1)标准格式,完美输出。GPT对于公文等具有一定标准格式的文件,可以进行完美仿写,随随便便以假乱真那都是小菜一碟,这对于经常要开展规范成文的人来说,简直就是个福音,只要前期调教…...
WPF 漂亮长方体、正文体简单实现方法 Path实现长方体 正方体方案 WPF快速实现长方体、正方体的方法源代码
这段XAML代码在WPF中实现了一个类似长方体视觉效果的图形 声明式绘制:通过Path、PathGeometry和PathFigure等元素组合,能够以声明方式精确描述长方体每个面的位置和形状,无需编写复杂的绘图逻辑,清晰直观。 层次结构与ZIndex控制…...
Nginx(十三) 配置文件详解 - 反向代理(超详细)
本篇文章主要讲ngx_http_proxy_module和ngx_stream_proxy_module模块下各指令的使用方法。 1. 代理请求 proxy_pass 1.1 proxy_pass 代理请求 Syntax: proxy_pass URL; Default: — Context: location, if in location, limit_except 设置代理服务器的协议和地址以…...
谷歌浏览器启用实时字幕功能
在 Chrome 中使用“实时字幕”功能 - Google Chrome帮助 在 Chrome 中使用“实时字幕”功能 从计算机上的 Chrome 浏览器中,您可以使用“实时字幕”功能自动为视频、播客、游戏、直播、视频通话或其他音频媒体生成字幕。音频和字幕均在本地处理,并会保…...
php接口优化 使用curl_multi_init批量请求
PHP使用CURL同时抓取多个URL地址 抓取多个URL地址是Web开发中常见的需求,使用PHP的curl库可以简化这个过程。本文将详细介绍如何使用PHP的curl库同时请求多个URL地址,并提供具体的代码案例和注释。 curl库介绍 curl是一个常用的开源网络传输工具&…...
联邦拜占庭共识算法的工作流程
1 前言 联邦拜占庭共识算法(Federated Byzantine Agreement,简称FBA)是一种解决分布式系统中拜占庭问题的共识算法,是拜占庭容错共识算法里的其中一种,主要应用于区块链技术中。这种算法允许系统内部的各种节点自由进…...
国家开放大学形成性考核 统一考试 学习资料参考
试卷代号:11119 机械CAD/CAM 参考试题 一、单项选择题(从所给的四个选项中,找出你认为是正确的答案,将其编号填入括号内。每小题3分,共45分) 1.下述CAD/CAM过程的概念中,属于CAM范畴的是&am…...
dw个人网站制作/深圳网站开发制作
一:利用jquery方法获得 1:取值 $(window.parent.document).find("#second_navigator").html(); 2:改变父页面元素 $(window.parent.document).find("#second_navigator").html(“我是从iframe里传来的值”); 二&…...
网站排名按天付费/关键词排名优化易下拉技巧
UT中需要的jar Junit4.1X.jar hamcrest-library-1.x.jar hamcrest-core-l.x.jar mockito-all-1.10.x.jar Junit 使用hamcrest的Matcher找不到的问题(比如greaterThan) 问题:用junit在进行单元测试的时候,使用assertThat方法&#…...
邢台做网站推广/接推广一般多少钱
----------------------[感谢小昭提供的图片]1.缓存穿透定义:请求查询数据库中压根就不存在的数据,每次请求直接打在DB上,这种查询查询不存在数据的现象称为缓存穿透穿透带来的问题:请求过多全部都打在DB上,请求会在DB…...
做电脑壁纸的网站/免费网站制作教程
步骤一:window-->open Perspective-->MyEclipse JavaPersistence进行了上面的 操作后会出现一个视图DB Brower:MyEclipse Derby,点击右键新建new一个在出现的面板Database Driver中,Drivertemplate中选择Oracle(ThinDriver)这里以oracl…...
深圳网站建设seo/百度网页游戏
转: http://www.blogjava.net/kent/articles/200991.html只有MDF文件如何恢复数据库 由于种种原因,我们如果当时仅仅备份了mdf文件,那么恢复起来就是一件很麻烦的事情了。 如果您的mdf文件是当前数据库产生的,那么很侥幸,也许你使…...
兰州建设局网站/百度seo sem
本文实例讲述了PHP字符串word末字符实现大小写互换的方法。分享给大家供大家参考。具体实现方法如下:一、要求:给出一个字符串如 “A journey of, a thousand "miles" must can"t "begin" with a single step.” ,通…...