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

Vue3中的toRef和toRefs的区别和用法

刚做了Ref和Reactive区别及使用方法笔记,再来总结一下,toReftoRefs 的作用、用法、区别

1、作用和区别

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新。

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

2、使用方式

2.1 toRef使用示例

<template><h2>reactive-name: {{ user.name }} </h2><h2>toRef-name: {{ uName }}</h2><button @click="onChangeName">点击</button>
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18})// 复制 user 里的 name 属性let uName = toRef(user, 'name')// 更改  const onChangeName = () => {uName.value = 'ls'}return {user,uName,onChangeName}}
}
</script> 

2.2 toRefs使用示例

<template><h2>{{ name }} </h2><h2>{{ age }}</h2> 
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18}) return {...toRefs(user),}}
}
</script> 

相关文章:

Vue3中的toRef和toRefs的区别和用法

刚做了Ref和Reactive区别及使用方法笔记&#xff0c;再来总结一下&#xff0c;toRef 和 toRefs 的作用、用法、区别 1、作用和区别 toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref&#xff0c;而且它既保留了响应式&#xff0c;也保留了引用&#xff0c;也就…...

【docker快捷部署系列一】docker快速入门,安装docker,解决运行Docker Quickstart Terminal出错

1、docker快速入门 视频链接 知识点概述 docker是轻量级虚拟机image是镜像 相当于虚拟机快照container是容器&#xff0c;相当于运行起来的虚拟机程序Dockerfile 是创建docker镜像的自动化脚本docker-compose 是一个定义和运行多个容器命令的工具&#xff0c;包括运行Docker…...

vulnhub靶机实战_DC-8

一、靶机下载 靶机下载链接汇总&#xff1a;https://download.vulnhub.com/使用搜索功能&#xff0c;搜索dc类型的靶机即可。本次实战使用的靶机是&#xff1a;DC-8系统&#xff1a;Debian下载链接&#xff1a;https://download.vulnhub.com/dc/DC-8.zip 二、靶机启动 下载完…...

如何做到项目真实性优化?保姆级写简历指南第五弹!

大家好&#xff0c;我是程序员鱼皮。做知识分享这些年来&#xff0c;我看过太多简历、也帮忙修改过很多的简历&#xff0c;发现很多同学是完全不会写简历的、会犯很多常见的问题&#xff0c;不能把自己的优势充分展示出来&#xff0c;导致措施了很多面试机会&#xff0c;实在是…...

Python Beautiful Soup介绍

在Web数据抓取和网页解析的世界里&#xff0c;Python以其简洁的语法和丰富的库资源成为了许多开发者的首选语言。而Beautiful Soup&#xff0c;作为Python中一个强大的HTML和XML解析库&#xff0c;更是以其易用性和灵活性赢得了广泛的赞誉。本文将带你走进Beautiful Soup的世界…...

NDI Tools汉化版的安装

目录 一、安装包下载 二、安装英文版 三、安装汉化版 NDI(Network Device Interface)即网络设备接口,是由美国 NewTek 公司开发的免费标准,它可使兼容的视频产品以高质量、低延迟、精确到帧的方式通过网络进行通讯、传输和接收广播级质量的视频,非常适合在现场直播制作…...

【JAVA多线程】AQS,JAVA并发包的核心

目录 1.概述 1.1.什么是AQS 1.2.AQS和BlockQueue的区别 1.3.AQS的结构 2.源码分析 2.1.CLH队列 2.2.模板方法的实现 2.2.1.独占模式 1.获取资源 2.释放资源 2.2.2.共享模式 1.概述 1.1.什么是AQS AQS非常非常重要&#xff0c;可以说是JAVA并发包&#xff08;java.…...

springcloud loadbalancer nacos无损发布

前言 故事背景 jenkins部署时总是会有几秒钟接口调用报错&#xff0c;观察日志是因为流量被下发到已下线的服务&#xff0c;重启脚本在停止应用之前先调用nacos注销实例api后再重启依然会短暂出现此问题。项目架构是springcloud alibaba,通过openfeign进行微服务之间调用&…...

React原理

函数式编程 一种编程范式,概念比较多纯函数不可变值vdom和diff Vue2.x Vue3.x React 三者实现vdom细节都不同核心概念和实现思路,都一样h函数 用来生成vnode的函数 vnode数据结构 {tag: div,props: {className: div-class},children: [{tag: p,children: 测试}, ...] }pat…...

React-Native优质开源项目

React Native是由Facebook开发的一种开源框架&#xff0c;它允许开发者使用JavaScript和React编写原生应用&#xff0c;提供了一套跨平台的UI组件&#xff0c;可以在iOS和Android上实现一致的用户体验。在React Native的生态系统中&#xff0c;有许多优质的开源项目&#xff0c…...

Ajax-02

一.form-serialize插件 作用&#xff1a;快速收集表单元素的值 const form document.querySelector(.example-form) const data serialize(form,{hash:true,empty:true}) *参数1&#xff1a;要获取哪个表单的数据 表单元素设置name属性&#xff0c;值会作为对象的属性名 建议…...

供应商较多的汽车制造业如何选择供应商协同平台?

汽车制造业的供应商种类繁多&#xff0c;根据供应链的不同环节和产品特性&#xff0c;可以大致分为以下几类。 按供应链等级分包括&#xff1a; 一级供应商通常具有较高的技术水平和生产能力&#xff0c;能够满足汽车厂商对零部件的高品质、高性能和高可靠性的要求。 二级供应…...

【开端】JAVA Mono<Void>向前端返回没有登陆或登录超时 暂无权限访问信息组装

一、绪论 JAVA接口返回信息ServerHttpResponse response 等登录接口token过期时需要给前端返回相关状态码和状态信息 二、Mono<Void>向前端返回没有登陆或登录超时 暂无权限访问信息组装 返回Mono对象 public abstract class Mono<T> implements CorePublisher…...

Python(模块---pandas+matplotlib+pyecharts)

import pandas as pd import matplotlib.pyplot as plt dfpd.read_excel(简易数据.xlsx) # print(df) plt.rcParams[font.sans-serif][SimHei] #设置画布的大小 plt.figure(figsize(10,6)) labelsdf[电影中文名] ydf[国籍] # print(labels) # print(y)# import pandas as pd im…...

解决使用Navicat连接数据库时,打开数据库表很慢的问题

今天使用Navicat连接数据库时&#xff0c;发现不管表中数据多少&#xff0c;打开数据库表非常慢。 解决方法&#xff1a; Navicat - 右键编辑数据库连接 - 高级 - 勾选保持连接间隔 - 输入框设置为20 - 点击确定&#xff01; 参考文章&#xff1a;https://51.ruyo.net/14030.…...

nginx重启报错nginx: [error] invalid PID number

nginx重启报错nginx: [error] invalid PID numb 解决亲测有用 问题描述解决方式 问题描述 编译安装完 nginx 后&#xff0c;启动 nginx时&#xff0c;出现nginx已经在运行&#xff0c;然后输入 ./nginx -s reload时,出现了 nginx: [error] invalid PID number “” in “/us…...

人工智能深度学习系列—深度学习中的相似性追求:Triplet Loss 全解析

人工智能深度学习系列—深度解析&#xff1a;交叉熵损失&#xff08;Cross-Entropy Loss&#xff09;在分类问题中的应用 人工智能深度学习系列—深入解析&#xff1a;均方误差损失&#xff08;MSE Loss&#xff09;在深度学习中的应用与实践 人工智能深度学习系列—深入探索KL…...

26. Hibernate 如何自动生成 SQL 语句

1. 前言 本节和大家一起聊聊 Hibernate 是如何自动生成 SQL 语句的。通过本节的学习&#xff0c;你将了解到&#xff1a; 反射在框架中的重要性&#xff1b;元数据描述对 Hibernate 的重要性。 2. 理想状态 Hibernate 是全自动的 JDBC 框架&#xff0c;能自动构建 SQL 语句、…...

预言机(Oracle machine)

预言机&#xff08;Oracle machine&#xff09;是一个在多个领域中有不同应用和解释的概念。以下是从不同角度对预言机的详细解析&#xff1a; 一、计算复杂度理论与可计算性理论中的预言机 在计算复杂度理论与可计算性理论中&#xff0c;预言机是一种抽象电脑&#xff0c;用…...

55、PHP实现插入排序、二分查找

题目&#xff1a; PHP实现插入排序 描述&#xff1a; 思路:选择一个带插入的元素(假设从第一个开始),分别和已经插入有顺序的元素比较,如果要插入元素比比较元素小,则位置交换 function insertSort($arr){if(!is_array($arr)) return false;//外层循环插入次数for($i1;$i<…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...