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

Vue3的reactive、ref、toRef、toRefs用法以及区别

在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。

  1. reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。
import { reactive } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});
  1. ref:用于创建一个响应式的引用对象。它接受一个参数,可以是基本类型(如数字、字符串等),也可以是对象。当引用的值发生变化时,视图会自动更新。
import { ref } from 'vue';const count = ref(0);
const info = ref({name: '张三',age: 18
});
  1. toRef:用于创建一个响应式的引用对象,与 ref 类似,但它接受一个对象作为参数。当对象的属性发生变化时,视图会自动更新。
import { toRef } from 'vue';const state = reactive({info: {name: '张三',age: 18}
});const nameRef = toRef(state, 'info.name');
const ageRef = toRef(state, 'info.age');
  1. toRefs:用于将一个响应式对象的所有属性转换为单独的响应式引用对象。这样可以让代码更易于理解和维护。
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});const { count, info } = toRefs(state);

总结:reactive 用于创建响应式对象,可以包含嵌套的对象;reftoRef 用于创建响应式的引用对象,只能包含基本类型或对象的某个属性;toRefs 用于将响应式对象的所有属性转换为单独的响应式引用对象。

相关文章:

Vue3的reactive、ref、toRef、toRefs用法以及区别

在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。 reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。 import { reacti…...

微信小程序:input双向绑定

微信小程序&#xff1a;input双向绑定 微信小程序&#xff1a;input双向绑定1 数据容器准备2 输入组件准备3 逻辑代码准备4 总结实战示例1.wxml文件导入2.js文件导入 微信小程序&#xff1a;input双向绑定 <说明> PS&#xff1a;该笔记采用渐进式编程&#xff0c;使每一步…...

RT-Thread ADC_DMA

看到这里&#xff0c;相信大家已经尝试过网上各类ADC_DMA传输的文章&#xff0c;且大多都并不能实现&#xff0c;因为在RT-Thread中并没有找到关于ADC的DMA接口&#xff0c;在官方例程中有关DMA的传输也只有一个串口接收的介绍&#xff0c;找遍全网怕也没能找到真正有用的消息。…...

生成带依赖Jar 包的两种常用方式:IDEA打包工具:Artifacts 和 maven-shade-plugin

文章目录 前言1、IDEA打包工具&#xff1a;Artifacts1.1 创建Artifacts1.2 选择第三方jar文件1.3 打包Artifacts1.4 测试jar包 2、maven-shade-plugin2.1、pom文件添加2.2、打包2.3、测试jar包 总结 前言 当我们编写完Java程序后&#xff0c;为了提高执行效率通常会将应用程序…...

idea 插件开发日志绑定问题

错误日志 Searchable options index builder completed SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/D:/gradle/caches/modules-2/files-2.1/com.jetbrains.intellij.idea/ideaIC/2021.2/b0727ceddea2b62b16825db9308e14a470198…...

Elasticsearch(ES)概述

文章目录 一.什么是Elasticsearch?1.正向索引和倒排索引2.Mysql和ES的概念对比3.安装elasticsearch、kibana 二.IK分词器三.索引库操作四.文档操作五.RestClient操作索引库1.初始化RestClient2.创建索引库3.删除索引库4.判断索引库是否存在 六.RestClient操作文档1.新增文档2.…...

网络入门---网络编程初步认识和实践

目录标题 前言准备工作udpserver.hpp成员变量构造函数初始化函数(socket,bind)start函数(recvfrom) udpServer.ccudpClient.hpp构造函数初始化函数run函数(sendto) udpClient.cc测试 前言 在上一篇文章中我们初步的认识了端口号的作用&#xff0c;ip地址和MAC地址在网络通信时…...

Linux系统安装Docker-根据官方教程教程(以Ubuntu为例)

Linux系统安装Docker-根据官方教程教程&#xff08;以Ubuntu为例&#xff09; 1. 背景介绍2. 环境配置2.1 软件环境要求2.2 软件下载2.3 文档地址2.3 必备命令工具下载 3. 安装Docker3.1 使用root用户操作后续命令3.2 卸载可能存在的旧版本 4. 安装Docker4.1 更新依赖包4.2 配置…...

2023-12-03 LeetCode每日一题(可获得的最大点数)

2023-12-03每日一题 一、题目编号 1423. 可获得的最大点数二、题目链接 点击跳转到题目位置 三、题目描述 几张卡牌 排成一行&#xff0c;每张卡牌都有一个对应的点数。点数由整数数组 cardPoints 给出。 每次行动&#xff0c;你可以从行的开头或者末尾拿一张卡牌&#x…...

【唐山海德教育】安全员b证的考试科目

安全员b证考试内容包括对安全生产知识和管理能力考核&#xff0c;采用书面或计算机闭卷考试方式&#xff0c;内容包括安全生产法律法规、安全管理和安全技术等内容。其中&#xff0c;法律法规占50%&#xff0c;安全管理占40%&#xff0c;土建综合安全技术占6%&#xff0c;机械设…...

吉他初学者学习网站搭建系列(4)——如何查询和弦图

文章目录 背景实现ChordDbvexchords 背景 作为吉他初学者&#xff0c;如何根据和弦名快速查到和弦图是一个必不可少的功能。以往也许你会去翻和弦的书籍查询&#xff0c;像查新华字典那样&#xff0c;但是有了互联网后我们不必那样&#xff0c;只需要在网页上输入和弦名&#…...

九章量子计算机:探索量子世界的革命性工具

九章量子计算机:探索量子世界的革命性工具 一、引言 九章量子计算机的推出,是近年来科技界最为引人瞩目的成就之一。这款基于量子力学的计算机,以其独特的计算方式和潜在的应用前景,引发了全球范围内的关注和讨论。本文将深入探讨九章量子计算机的原理、技术特点、应用前景…...

在 Linux 上修改 Oracle 控制文件、日志文件和数据文件的目录的脚本

以下是一个交互式的 Bash 脚本示例&#xff0c;用于在 Linux 上修改 Oracle 数据库控制文件、日志文件和数据文件的目录。脚本会要求您输入要修改的路径&#xff0c;并根据输入的路径执行相应的修改操作。 #!/bin/bash# 修改以下变量以匹配您的 Oracle 数据库设置 ORACLE_SID&…...

JavaScript 延迟加载的艺术:按需加载的最佳实践

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

HTML之实体和标签

HTML之实体和标签 实体标签meta标签语义化标签列表超链接 实体 如果我们需要在网页中书写一些特殊符号&#xff0c;则需要在html中使用【实体】&#xff08;转义符&#xff09; 实体语法&#xff1a; &实体的名字; <!DOCTYPE html> <html lang"en"> …...

【小布_ORACLE笔记】Part11-1--RMAN Backups

Oracle的数据备份于恢复RMAN Backups 学习第11章需要掌握&#xff1a; 一.RMAN的备份类型 二.使用backup命令创建备份集 三.创建备份文件 四.备份归档日志文件 五.使用RMAN的copy命令创建镜像拷贝 文章目录 Oracle的数据备份于恢复RMAN Backups1.RMAN Backup Concepts&#x…...

卷积神经网络-3D医疗影像识别

文章目录 一、前言二、前期工作1. 介绍2. 加载和预处理数据 二、构建训练和验证集三、数据增强四、数据可视化五、构建3D卷积神经网络模型六、训练模型七、可视化模型性能八、对单次 CT 扫描进行预测 一、前言 我的环境&#xff1a; 语言环境&#xff1a;Python3.6.5编译器&a…...

C++基础 -33- 单目运算符重载

单目运算符重载格式 a和a通过形参确定 data1 operator() {this->a;return *this; }data1 operator(int) {data1 temp*this;this->a;return temp; }举例使用单目运算符重载 #include "iostream"using namespace std;class data1 {public :int a;data1(int…...

[传智杯 #3 初赛] 课程报名

题目描述 传智播客推出了一款课程&#xff0c;并进行了一次促销活动。具体来说就是&#xff0c;课程的初始定价为 v 元&#xff1b;每报名 m 个学员&#xff0c;课程的定价就要提升 a 元。由于课程能够容纳的学生有限&#xff0c;因此报名到 n 人的时候就停止报名。 现在老师…...

华为OD机试 - 悄悄话(Java JS Python C)

题目描述 给定一个二叉树,每个节点上站一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。 初始时,根节点所在位置的人有一个悄悄话想要传递给其他人,求二叉树所有节点上的人都接收到悄悄话花费的时间。 输入描述 给定二叉树 0 9 20 -1 -1 15 7 -1 -1 -1 -1 …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

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任务 三、…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...