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

Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象

 Vue3.0组合式API系列文章:

《Vue3.0组合式API:setup()函数》

《Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象》

《Vue3.0组合式API:computed计算属性、watch监听器、watchEffect高级监听器》

《Vue3.0组合式API:使用defineProps()实现父组件向子组件传递数据》

《Vue3.0组合式API:使用defineEmits()实现子组件向父组件传递数据》

《Vue3.0组合式API:生命周期钩子函数》

《Vue3.0组合式API:依赖注入provide和inject实现跨层组件的通信》

《Vue3.0组合式API:使用ref获取DOM元素》

1、reactive() 方法

reactive() 方法用于将定义的 JavaScript 对象转换为响应式对象。

使用方法:

<script setup>
//第一步:导入函数
import { reactive } from 'vue';//第二步:创建响应式对象
const data = reactive(对象类型的数据);
</script>

【实例】使用 reactive() 方法,创建一个响应式对象,并实现修改响应式对象的值。

<template><fieldset><legend>组件</legend><p>用户名称:{{ userInfo.userName }}</p><p>用户年龄:{{ userInfo.age }}</p><p>博客信息:{{ userInfo.blogName }}</p><p>博客地址:{{ userInfo.blogUrl }}</p><button @click="updateAge">修改年龄</button></fieldset>
</template><script setup>
//第一步:导入函数
import { reactive } from 'vue';//第二步:创建响应式对象,参数为对象
const userInfo = reactive({userName: 'pan_junbiao的博客',age: 0,blogName: '您好,欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao'
});//修改年龄方法
function updateAge() {userInfo.age = 36;
}</script>

执行结果:

2、ref() 方法

reactive() 方法可以为一个 JavaScript 对象创建响应式代理,如果需要对象某个基本数据类型(如:数字、字符串)的数据创建响应式代理对象,可以通过 ref() 方法实现。该方法接收一个原始值作为参数(也支持对象类型),返回一个响应式的对象,该对象只有一个 value 属性值指向内部值。

使用方法:

<script setup>
//第一步:导入函数
import { ref } from 'vue';//第二步:创建响应式对象
const data = ref(基本数据类型 或 对象类型);
</script><template><!-- 第三步:使用响应式对象 --><p>{{ data }}</p>
</template>

【实例】使用 ref() 方法,创建一个响应式对象,并实现一个计数器功能。

<template><fieldset><legend>组件</legend><!-- 第三步:使用响应式对象 --><p>计数结果:{{ count }}</p><button @click="counter">计数器</button></fieldset>
</template><script setup>
//第一步:导入函数
import { ref } from 'vue';//第二步:创建响应式对象
const count = ref(0);// 增加计数的方法
function counter() {//注意:使用响应式对象的.value属性,获取内部值count.value++;
}
</script>

 执行结果:

说明:

如果将 ref() 方法创建的响应式代理对象作为属性返回,那么在模板中访问时不需要添加 .value 属性。

3、reactive 与 ref 的区别

reactive() 方法与 ref() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别:

  1. reactive() 方法的参数,必须是对象类型。
  2. ref() 方法参数可以是基本数据类型,也可以是对象类型。
  3. ref() 方法创建的响应式对象,必须通过 .value 属性访问。
  4. ref() 方法的内部实现依赖于 reactive() 方法。

在实际的项目开发中,推荐使用 ref() 方法,因为更加灵活。

相关文章:

Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象

Vue3.0组合式API系列文章&#xff1a; 《Vue3.0组合式API&#xff1a;setup()函数》 《Vue3.0组合式API&#xff1a;使用reactive()、ref()创建响应式代理对象》 《Vue3.0组合式API&#xff1a;computed计算属性、watch监听器、watchEffect高级监听器》 《Vue3.0组合式API&…...

kubernetes调度2

1、各种缩写的应用 [rootk8s-master test]# kubectl get rsNAME DESIRED CURRENT READY AGEtest001-64c7957b5c 2 2 2 8m59stest001-698b98bb8f 0 0 0 12m[rootk8s-master test]# kubectl get replicas…...

Android中如何处理运行时权限?

在Android中&#xff0c;处理运行时权限是开发过程中一个至关重要的环节&#xff0c;它自Android 6.0&#xff08;API级别23&#xff09;引入&#xff0c;旨在提高用户隐私保护和应用的透明度。以下将详细阐述Android中处理运行时权限的方法、步骤、注意事项以及相关的最佳实践…...

【PyCharm】PyCharm:让开发者效率倍增的编程利器

在现代软件开发过程中&#xff0c;选择一款得心应手的编程工具不仅能提高效率&#xff0c;还能让编程过程更加愉悦。而在众多集成开发环境&#xff08;IDE&#xff09;中&#xff0c;PyCharm无疑是Python开发者的首选之一。作为一款功能强大、设计精良的IDE&#xff0c;PyCharm…...

Spring Boot- 配置中心问题

Spring Boot 配置中心相关问题探讨 在现代微服务架构中&#xff0c;随着系统规模的扩展和复杂度的增加&#xff0c;配置管理变得越来越重要。每个微服务都可能有大量的配置文件&#xff0c;包括数据库连接信息、缓存配置、消息队列配置等。如果每个服务独立管理配置文件&#…...

字符串专题-1

目录 1.简介 2.例题 2.1找出字符串第一个匹配项的下标 2.2最长公共前缀 2.3最长回文子串 2.4二进制求和 2.5字符串相乘 1.简介 关于字符串匹配的常用算法KMP&#xff0c;我这里只做思路上的说明&#xff0c;具体内容文字和图片写来写去还是有点怪异&#xff0c;这边推荐…...

Unsupervised Deep Representation Learning for Real-Time Tracking

摘要 我们的无监督学习的动机是稳健的跟踪器应该在双向跟踪中有效。具体来说&#xff0c;跟踪器能够在连续帧中前向定位目标对象&#xff0c;并回溯到其在第一帧中的初始位置。基于这样的动机&#xff0c;在训练过程中&#xff0c;我们测量前向和后向轨迹之间的一致性&#xf…...

第二讲 数据结构

单链表 826. 单链表 - Acwing题库 数据结构&#xff1a; e[N]&#xff1a;用于存储节点的值的数组。ne[N]&#xff1a;作为“下一个”指针的数组&#xff0c;用于连接节点。head&#xff1a;指向链表头部的索引。idx&#xff1a;当前可用的下一个索引。 初始化&#xff1a; …...

docker部署excalidraw画图工具

0&#xff09;效果 0.1&#xff09;实时协作 0.2&#xff09;导出格式 1&#xff09;docker安装 docker脚本 bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrorsmain/DockerInstallation.sh)docker-compose脚本 curl -L "https://github.com/…...

5G技术对IT行业的影响及未来发展

5G技术对IT行业的影响及未来发展 随着5G网络的快速部署&#xff0c;全球正进入一个全新的高速连接时代。5G不仅仅是移动通信的升级&#xff0c;它将带来更多的应用场景和改变各个行业的运作方式。本文将探讨5G技术的核心特点、对IT行业的影响&#xff0c;以及未来可能的发展方向…...

字节跳动的微服务独家面经

在之前的文章中也介绍了相关微服务的项目开发知识&#xff0c;那么在本文中我将分享一份来自字节跳动相关岗位的面试经历&#xff0c;在其中我们一起来看看面试问题的详细内容&#xff0c;如果有对微服务的感兴趣的朋友们也可以联系我了解我们的微服务项目&#xff0c;也希望该…...

嵌套函数的例子(TypeScript)

在 TypeScript 中&#xff0c;嵌套函数是指在一个函数内部定义另一个函数。嵌套函数可以访问外部函数的变量&#xff08;闭包&#xff09;&#xff0c;并且可以在内部进行调用。下面是一个简单的例子来说明嵌套函数的使用&#xff1a; function outerFunction(outerVariable: …...

0915,SOCKET网络编程部分,三种I/O多路复用模型(select ,poll,epoll)

目录 nc 127.0.0.1 port 01_socket_client.cc 01_socket_server.cc 02_select_client.cc 02_select_server.cc 03_poll_server.cc 04_epoll_server.cc 01_socket_client.cc #include <stdlib.h> #include <string.h> #include <sys/stat.h> #inclu…...

HarmonyOS 应用获取公钥和 MD5 指纹签名信息

鸿蒙版本获取 MD5 指纹和公钥可参考如下方式; 首先,通过 AGC 官网 将所需证书下载至本地; 其次,通过记事本或者文本编译器的方式将其正式打开,将其内容中前两项 BEGIN CERTIFICATE 和 END CERTIFICATE 的段落删除,仅保留最后一段中的内容(包括 BEGIN CERTIFICATE 和 END CERTI…...

封装一个录音声音振动效果的组件

目标&#xff1a;根据声音的大小实现声音振动特效 实现步骤&#xff1a; 通过 getAudioCapturerMaxAmplitude 观察音频区间封装振动组件&#xff0c;通过声音振幅数据实现振动效果 落地代码&#xff1a; 1&#xff09;获取振幅数据&#xff0c;出入振动组件 AudioPage.ets …...

Java、JS与Go的扩展操作符,揭秘它们的‘魔法’!

在这个快节奏的互联网时代&#xff0c;程序员们总是希望能够用更简洁、更高效的方式来编写代码。扩展操作符&#xff08;Spread Operator&#xff09;是 JavaScript ES6 引入的重要特性&#xff0c;而 Java 和 Go 也有各自的方式来实现类似的功能。今天&#xff0c;我们就来深入…...

ROS学习笔记13——rosbag功能包的简单使用

rosbag是用于录制和回放 ROS 主题的一个工具集&#xff0c;实现了数据的复用&#xff0c;方便调试和测试。rosbag本质也是ros的节点&#xff0c;当录制时&#xff0c;rosbag是一个订阅节点&#xff0c;可以订阅话题消息并将订阅到的数据写入磁盘文件&#xff1b;当重放时&#…...

Python Flask网页开发基本框架

注&#xff1a;Flask详细学习请见Flask学习合集。 直接上代码: app.py from flask import Flaskapp Flask(__name__)app.route("/") def hello():return "Hello, World!"if __name__ "__init__":app.run(host "127.0.0.1", port…...

Mybatis-plus进阶篇(五)

文章目录 条件构造器补充知识TypeHandlerWrappers示例&#xff1a; 线程安全性示例&#xff1a; 使用 Wrapper 自定义 SQL示例&#xff1a;使用方法 使用注解查询使用XML配置查询链式调用与Lambda式调用 条件构造器补充知识 TypeHandler 在 wrapper 中使用 typeHandler 需要特…...

交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面

一、介绍 交通标志识别系统。本系统使用Python作为主要编程语言&#xff0c;在交通标志图像识别功能实现中&#xff0c;基于TensorFlow搭建卷积神经网络算法模型&#xff0c;通过对收集到的58种常见的交通标志图像作为数据集&#xff0c;进行迭代训练最后得到一个识别精度较高…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...