vue3 之 组合式API—reactive和ref函数
ref()
作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤:
1️⃣ 从 vue 包中导入 ref 函数
2️⃣在
<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>
reactive()
作用:接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤:
1️⃣ 从 vue 包中导入 reactive 函数
2️⃣ 在

<script setup>// 导入import { reactive } from 'vue'// 执行函数 传入参数 变量接收const state = reactive({msg:'this is msg'})const setSate = ()=>{// 修改数据更新视图state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>
总结
1️⃣ reactive和ref函数的共同作用是什么 ?
用函数调用的方式生成响应式数据
2️⃣ reactive vs ref ?
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive函数
3️⃣ 在实际工作中推荐使用哪个?
推荐使用ref函数,更加灵活
相关文章:
vue3 之 组合式API—reactive和ref函数
ref() 作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象 核心步骤: 1️⃣ 从 vue 包中导入 ref 函数 2️⃣在 <script setup>// 导入import { ref } from vue// 执行函数 传入参数 变量接收const count …...
Python库-PyAutoGUI
pyautogui是一个Python库,可以自动控制键盘和鼠标,非常适合进行自动化任务。它可以用于各种场景,比如自动化测试、数据录入任务,甚至是简单的游戏机器人。下面是一个关于pyautogui的入门教程,包括它的安装、基本使用方…...
越权测试是什么?
一、越权测试是什么? 越权漏洞是web应用程序中常见的一种安全漏洞。它的威胁在于一个账户可控制全站用户数据。越权漏洞产生的原因主要是因为开发人员在对数据进行增删改查时对客户端的请求数据过分相信而遗漏了权限的判定。 二、越权漏洞的分类 越权分为2种&…...
H5 简约四色新科技风引导页源码
H5 简约四色新科技风引导页源码 源码介绍:一款四色切换自适应现代科技风动态背景的引导页源码,源码有主站按钮,分站按钮2个,QQ联系站长按钮一个。 下载地址: https://www.changyouzuhao.cn/11990.html...
使用 VTK 中的单元定位器来查找最近的点
开发环境: Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example demo解决问题:使用 VTK 中的单元定位器来查找最近的点 关键点: 创建了一个球体数据源,并使用它构建了一个单元定位器&#x…...
时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测
时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LST…...
Xcode 15 及以上版本:libarclite 库缺少问题
参考链接:Xcode 15 libarclite 缺失问题_sdk does not contain libarclite at the path /ap-CSDN博客 报错: SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarcl…...
Spring设计模式之单例模式
文章目录 一、概述二、单例模式的优点三、Spring中的单例模式四、单例模式的实现方式五、总结 一、概述 单例模式是一种创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点来获取该实例。在Spring框架中,单例模式是默认的Bean定义…...
Fink CDC数据同步(二)MySQL数据同步
1 开启binlog日志 2 数据准备 use bigdata; drop table if exists user;CREATE TABLE user(id INTEGER NOT NULL AUTO_INCREMENT,name VARCHAR(20) NOT NULL DEFAULT ,birth VARCHAR(20) NOT NULL DEFAULT ,gender VARCHAR(10) NOT NULL DEFAULT ,PRIMARY KEY(id) ); ALTER TA…...
JavaWeb后端开发(第一期):Maven基础、Maven的安装配置、如何创建maven项目模块、maven的生命周期
Java后端开发:2024年2月6日 -> LiuJinTao 文章目录 JavaWeb后端开发(第一期) : maven基础一、 maven介绍1.1 什么maven呢:1.2 maven的作用1.3 maven 模型1.4 maven 仓库 二、maven 安装2.1 配置本地仓库2.2 配置阿里…...
Windows SDK(四)鼠标和键盘消息处理
鼠标基础知识 鼠标一般分为三种状态,三个按钮 三种状态:单击,双击,拖动 三个按钮:左键(LBUTTON),右键(RBUTTON),中键(MBUTTON&…...
LabVIEW汽车自燃监测预警系统
LabVIEW汽车自燃监测预警系统 随着汽车行业的飞速发展,汽车安全问题日益受到公众的关注。其中,汽车自燃现象因其突发性和破坏性,成为一个不可忽视的安全隐患。为了有效预防和减少自燃事故的发生,提出了LabVIEW的汽车自燃监测预警…...
数据图表方案,企业视频生产数据可视化
在信息爆炸的时代,如何将复杂的数据转化为直观、生动的视觉信息,是企业在数字化转型中面临的挑战。美摄科技凭借其独特的数据图表方案,为企业在数据可视化领域打开了一扇全新的大门。 一、数据图表方案的优势 1、高效便捷:利用数…...
【HarmonyOS应用开发】APP应用的通知(十五)
相关介绍 通知旨在让用户以合适的方式及时获得有用的新消息,帮助用户高效地处理任务。应用可以通过通知接口发送通知消息,用户可以通过通知栏查看通知内容,也可以点击通知来打开应用,通知主要有以下使用场景: 显示接收…...
开启一个服务,将服务器指定的文件读取,传播到网上其他终端
from flask import Flask, render_template_string app Flask(__name__)app.route(/get-data) def get_data():# 读取data.txt文件的内容with open(r./2024/2/4/data.txt, r) as file:data file.read()print(data)# 返回数据的HTML表示return render_template_string(<div…...
nii convert to 2D image【python】
可以自己精简,我的label是二分类 import SimpleITK as sitk import cv2 from PIL import Image import numpy as np import nibabel as nib # nii格式一般都会用到这个包 import imageio # 转换成图像 import osimport numpy as np from scipy.ndimage import ro…...
C语言指针学习 之 指针是什么
前言 指针是C语言中一个重要概念,也是C语言的一个重要特色,正确而灵活地运用指针可以使程序简洁、紧凑、高效。每一个学习和使用C语言的人都应当深入的学习和掌握指针,也可以说不掌握指针就没有掌握C语言的精华。 一、什么是指针 想弄清楚什…...
【文本到上下文 #10】探索地平线:GPT 和 NLP 中大型语言模型的未来
一、说明 欢迎阅读我们【文本到上下文 #10】:此为最后一章。以我们之前对 BERT 和迁移学习的讨论为基础,将重点转移到更广阔的视角,包括语言模型的演变和未来,特别是生成式预训练转换器 (GPT) 及其在 NLP 中…...
(四)elasticsearch 源码之索引流程分析
https://www.cnblogs.com/darcy-yuan/p/17024341.html 1.概览 前面我们讨论了es是如何启动,本文研究下es是如何索引文档的。 下面是启动流程图,我们按照流程图的顺序依次描述。 其中主要类的关系如下: 2. 索引流程 (primary) 我们用postman发送请求&…...
飞天使-k8s知识点16-kubernetes实操1-pod
文章目录 深入Pod 创建Pod:配置文件详解写个pod的yaml 文件深入Pod 探针:探针技术详解 深入Pod 创建Pod:配置文件详解 资源清单参考链接:https://juejin.cn/post/6844904078909128712写个pod的yaml 文件 apiVersion: v1 kind: P…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开,快捷键也不好用,当看到 Cursor 升级后,还是蛮高兴的 1. 下载 Cursor 下载地址:https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ,…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
spring Security对RBAC及其ABAC的支持使用
RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型,它将权限分配给角色,再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...
