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() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别:
- reactive() 方法的参数,必须是对象类型。
- ref() 方法参数可以是基本数据类型,也可以是对象类型。
- ref() 方法创建的响应式对象,必须通过 .value 属性访问。
- ref() 方法的内部实现依赖于 reactive() 方法。
在实际的项目开发中,推荐使用 ref() 方法,因为更加灵活。
相关文章:
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&…...
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中,处理运行时权限是开发过程中一个至关重要的环节,它自Android 6.0(API级别23)引入,旨在提高用户隐私保护和应用的透明度。以下将详细阐述Android中处理运行时权限的方法、步骤、注意事项以及相关的最佳实践…...
【PyCharm】PyCharm:让开发者效率倍增的编程利器
在现代软件开发过程中,选择一款得心应手的编程工具不仅能提高效率,还能让编程过程更加愉悦。而在众多集成开发环境(IDE)中,PyCharm无疑是Python开发者的首选之一。作为一款功能强大、设计精良的IDE,PyCharm…...
Spring Boot- 配置中心问题
Spring Boot 配置中心相关问题探讨 在现代微服务架构中,随着系统规模的扩展和复杂度的增加,配置管理变得越来越重要。每个微服务都可能有大量的配置文件,包括数据库连接信息、缓存配置、消息队列配置等。如果每个服务独立管理配置文件&#…...
字符串专题-1
目录 1.简介 2.例题 2.1找出字符串第一个匹配项的下标 2.2最长公共前缀 2.3最长回文子串 2.4二进制求和 2.5字符串相乘 1.简介 关于字符串匹配的常用算法KMP,我这里只做思路上的说明,具体内容文字和图片写来写去还是有点怪异,这边推荐…...
Unsupervised Deep Representation Learning for Real-Time Tracking
摘要 我们的无监督学习的动机是稳健的跟踪器应该在双向跟踪中有效。具体来说,跟踪器能够在连续帧中前向定位目标对象,并回溯到其在第一帧中的初始位置。基于这样的动机,在训练过程中,我们测量前向和后向轨迹之间的一致性…...
第二讲 数据结构
单链表 826. 单链表 - Acwing题库 数据结构: e[N]:用于存储节点的值的数组。ne[N]:作为“下一个”指针的数组,用于连接节点。head:指向链表头部的索引。idx:当前可用的下一个索引。 初始化: …...
docker部署excalidraw画图工具
0)效果 0.1)实时协作 0.2)导出格式 1)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网络的快速部署,全球正进入一个全新的高速连接时代。5G不仅仅是移动通信的升级,它将带来更多的应用场景和改变各个行业的运作方式。本文将探讨5G技术的核心特点、对IT行业的影响,以及未来可能的发展方向…...
字节跳动的微服务独家面经
在之前的文章中也介绍了相关微服务的项目开发知识,那么在本文中我将分享一份来自字节跳动相关岗位的面试经历,在其中我们一起来看看面试问题的详细内容,如果有对微服务的感兴趣的朋友们也可以联系我了解我们的微服务项目,也希望该…...
嵌套函数的例子(TypeScript)
在 TypeScript 中,嵌套函数是指在一个函数内部定义另一个函数。嵌套函数可以访问外部函数的变量(闭包),并且可以在内部进行调用。下面是一个简单的例子来说明嵌套函数的使用: 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…...
封装一个录音声音振动效果的组件
目标:根据声音的大小实现声音振动特效 实现步骤: 通过 getAudioCapturerMaxAmplitude 观察音频区间封装振动组件,通过声音振幅数据实现振动效果 落地代码: 1)获取振幅数据,出入振动组件 AudioPage.ets …...
Java、JS与Go的扩展操作符,揭秘它们的‘魔法’!
在这个快节奏的互联网时代,程序员们总是希望能够用更简洁、更高效的方式来编写代码。扩展操作符(Spread Operator)是 JavaScript ES6 引入的重要特性,而 Java 和 Go 也有各自的方式来实现类似的功能。今天,我们就来深入…...
ROS学习笔记13——rosbag功能包的简单使用
rosbag是用于录制和回放 ROS 主题的一个工具集,实现了数据的复用,方便调试和测试。rosbag本质也是ros的节点,当录制时,rosbag是一个订阅节点,可以订阅话题消息并将订阅到的数据写入磁盘文件;当重放时&#…...
Python Flask网页开发基本框架
注: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示例: 线程安全性示例: 使用 Wrapper 自定义 SQL示例:使用方法 使用注解查询使用XML配置查询链式调用与Lambda式调用 条件构造器补充知识 TypeHandler 在 wrapper 中使用 typeHandler 需要特…...
交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面
一、介绍 交通标志识别系统。本系统使用Python作为主要编程语言,在交通标志图像识别功能实现中,基于TensorFlow搭建卷积神经网络算法模型,通过对收集到的58种常见的交通标志图像作为数据集,进行迭代训练最后得到一个识别精度较高…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
