Vue3的reactive、ref、toRef、toRefs用法以及区别
在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。
reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。
import { reactive } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});
ref:用于创建一个响应式的引用对象。它接受一个参数,可以是基本类型(如数字、字符串等),也可以是对象。当引用的值发生变化时,视图会自动更新。
import { ref } from 'vue';const count = ref(0);
const info = ref({name: '张三',age: 18
});
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');
toRefs:用于将一个响应式对象的所有属性转换为单独的响应式引用对象。这样可以让代码更易于理解和维护。
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});const { count, info } = toRefs(state);
总结:reactive 用于创建响应式对象,可以包含嵌套的对象;ref 和 toRef 用于创建响应式的引用对象,只能包含基本类型或对象的某个属性;toRefs 用于将响应式对象的所有属性转换为单独的响应式引用对象。
相关文章:
Vue3的reactive、ref、toRef、toRefs用法以及区别
在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。 reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。 import { reacti…...
微信小程序:input双向绑定
微信小程序:input双向绑定 微信小程序:input双向绑定1 数据容器准备2 输入组件准备3 逻辑代码准备4 总结实战示例1.wxml文件导入2.js文件导入 微信小程序:input双向绑定 <说明> PS:该笔记采用渐进式编程,使每一步…...
RT-Thread ADC_DMA
看到这里,相信大家已经尝试过网上各类ADC_DMA传输的文章,且大多都并不能实现,因为在RT-Thread中并没有找到关于ADC的DMA接口,在官方例程中有关DMA的传输也只有一个串口接收的介绍,找遍全网怕也没能找到真正有用的消息。…...
生成带依赖Jar 包的两种常用方式:IDEA打包工具:Artifacts 和 maven-shade-plugin
文章目录 前言1、IDEA打包工具:Artifacts1.1 创建Artifacts1.2 选择第三方jar文件1.3 打包Artifacts1.4 测试jar包 2、maven-shade-plugin2.1、pom文件添加2.2、打包2.3、测试jar包 总结 前言 当我们编写完Java程序后,为了提高执行效率通常会将应用程序…...
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测试 前言 在上一篇文章中我们初步的认识了端口号的作用,ip地址和MAC地址在网络通信时…...
Linux系统安装Docker-根据官方教程教程(以Ubuntu为例)
Linux系统安装Docker-根据官方教程教程(以Ubuntu为例) 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. 可获得的最大点数二、题目链接 点击跳转到题目位置 三、题目描述 几张卡牌 排成一行,每张卡牌都有一个对应的点数。点数由整数数组 cardPoints 给出。 每次行动,你可以从行的开头或者末尾拿一张卡牌&#x…...
【唐山海德教育】安全员b证的考试科目
安全员b证考试内容包括对安全生产知识和管理能力考核,采用书面或计算机闭卷考试方式,内容包括安全生产法律法规、安全管理和安全技术等内容。其中,法律法规占50%,安全管理占40%,土建综合安全技术占6%,机械设…...
吉他初学者学习网站搭建系列(4)——如何查询和弦图
文章目录 背景实现ChordDbvexchords 背景 作为吉他初学者,如何根据和弦名快速查到和弦图是一个必不可少的功能。以往也许你会去翻和弦的书籍查询,像查新华字典那样,但是有了互联网后我们不必那样,只需要在网页上输入和弦名&#…...
九章量子计算机:探索量子世界的革命性工具
九章量子计算机:探索量子世界的革命性工具 一、引言 九章量子计算机的推出,是近年来科技界最为引人瞩目的成就之一。这款基于量子力学的计算机,以其独特的计算方式和潜在的应用前景,引发了全球范围内的关注和讨论。本文将深入探讨九章量子计算机的原理、技术特点、应用前景…...
在 Linux 上修改 Oracle 控制文件、日志文件和数据文件的目录的脚本
以下是一个交互式的 Bash 脚本示例,用于在 Linux 上修改 Oracle 数据库控制文件、日志文件和数据文件的目录。脚本会要求您输入要修改的路径,并根据输入的路径执行相应的修改操作。 #!/bin/bash# 修改以下变量以匹配您的 Oracle 数据库设置 ORACLE_SID&…...
JavaScript 延迟加载的艺术:按需加载的最佳实践
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…...
HTML之实体和标签
HTML之实体和标签 实体标签meta标签语义化标签列表超链接 实体 如果我们需要在网页中书写一些特殊符号,则需要在html中使用【实体】(转义符) 实体语法: &实体的名字; <!DOCTYPE html> <html lang"en"> …...
【小布_ORACLE笔记】Part11-1--RMAN Backups
Oracle的数据备份于恢复RMAN Backups 学习第11章需要掌握: 一.RMAN的备份类型 二.使用backup命令创建备份集 三.创建备份文件 四.备份归档日志文件 五.使用RMAN的copy命令创建镜像拷贝 文章目录 Oracle的数据备份于恢复RMAN Backups1.RMAN Backup Concepts&#x…...
卷积神经网络-3D医疗影像识别
文章目录 一、前言二、前期工作1. 介绍2. 加载和预处理数据 二、构建训练和验证集三、数据增强四、数据可视化五、构建3D卷积神经网络模型六、训练模型七、可视化模型性能八、对单次 CT 扫描进行预测 一、前言 我的环境: 语言环境: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 初赛] 课程报名
题目描述 传智播客推出了一款课程,并进行了一次促销活动。具体来说就是,课程的初始定价为 v 元;每报名 m 个学员,课程的定价就要提升 a 元。由于课程能够容纳的学生有限,因此报名到 n 人的时候就停止报名。 现在老师…...
华为OD机试 - 悄悄话(Java JS Python C)
题目描述 给定一个二叉树,每个节点上站一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。 初始时,根节点所在位置的人有一个悄悄话想要传递给其他人,求二叉树所有节点上的人都接收到悄悄话花费的时间。 输入描述 给定二叉树 0 9 20 -1 -1 15 7 -1 -1 -1 -1 …...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...
聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇
根据 QYResearch 发布的市场报告显示,全球市场规模预计在 2031 年达到 9848 万美元,2025 - 2031 年期间年复合增长率(CAGR)为 3.7%。在竞争格局上,市场集中度较高,2024 年全球前十强厂商占据约 74.0% 的市场…...
链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好,我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题,统一使用 二重复合函数: z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式(偏导…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
归并排序:分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法,由约翰冯诺伊曼在1945年提出。其核心思想包括: 分割(Divide):将待排序数组递归地分成两个子…...
