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…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
