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

Vue3中的<script setup>和<script>的区别

相同点

在一个 Vue3 单文件组件 (SFC)中,<script setup><script> 它们各自最多只能存在一个。

不同点

<script setup> 这个脚本块将被预处理为组件的 setup() 函数,这意味着它将为每一个(也可以说每一次)组件实例都执行。

<script> 只在组件被首次引入的时候执行一次,其它地方引入或再次实例化都不会再执行。

使用

所以我们可以利用这个差异性做一些事情。

1、除<script setup> 标签外再起一个<script>标签来存放一些字面量。
<script lang="ts">
export const componentName = 'MyComponent';export default {name: componentNameinheritAttrs: false,customOptions: {}
}
</script>
<script setup lang="ts">
// ...
console.log(componentName)
</script>
2、除<script setup> 标签外再起一个<script>标签来存放TS类型声明。
<script lang="ts">
export type Test = {aaa: string
}// 底部必须要有export或非TS类型申明代码,否则vscode中下方代码颜色会出现异常,原因未知
export {}
</script>
<script setup lang="ts">
// ...
const obj: Test = { aaa: '1' }
</script>

参考

  • 链接1
  • 链接2
  • 链接3

相关文章:

Vue3中的<script setup>和<script>的区别

相同点 在一个 Vue3 单文件组件 (SFC)中&#xff0c;<script setup> 和 <script> 它们各自最多只能存在一个。 不同点 <script setup> 这个脚本块将被预处理为组件的 setup() 函数&#xff0c;这意味着它将为每一个(也可以说每一次)组件实例都执行。 <…...

Docker笔记-Docker搭建最新版zabbix服务端(2023-07-31)

前言 一开始问chartgpt上&#xff0c;搭建的思路是对的&#xff0c;但命令和细节有问题&#xff0c;最后还是依靠StackOverflow解决的。一开始在amd的linux上搭建好docker版的zabbix&#xff0c;但放到arm的机器上就报错了&#xff0c;原因是指令集不匹配&#xff0c;最后跑到…...

QT配合CSS隐藏按钮

第一种方法 在Qt的CSS样式表中&#xff0c;使用 visibility 属性来隐藏按钮。设置 visibility 为 hidden 不可见&#xff0c;而设置为 visible 则可见。 隐藏所有 QPushButton QPushButton {visibility: hidden; }隐藏特定的按钮&#xff0c;用按钮的名称或样式类进行定位就…...

2023亚太地区数学建模C题思路分析+模型+代码+论文

目录 1.2023亚太地区各题思路模型&#xff1a;比赛开始后&#xff0c;第一时间更新&#xff0c;获取见文末名片 3 常见数模问题常见模型分类 3.1 分类问题 3.2 优化问题 详细思路见此名片&#xff0c;开赛第一时间更新 1.亚太地区数学建模ABC题思路模型&#xff1a;9比赛开…...

Linguistic Steganalysis in Few-Shot Scenario论文阅读笔记

TIFS期刊 A类期刊 新知识点 Introduction Linguistic Steganalysis in Few-Shot Scenario模型是个预训练方法。 评估了四种文本加密分析方法&#xff0c;TS-CSW、TS-RNN、Zou、SeSy&#xff0c;用于分析和训练的样本都由VAE-Stego生产(编码方式使用AC编码)。 实验是对比在少样…...

详细学习Pyqt5的4种项目部件(Item Widget)

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…...

notepad++ 插件JSONView安装

1&#xff0c;前提 开发过程中经常需要处理json格式语句&#xff0c;需要对json数据格式化处理&#xff0c;因为使用的是虚拟机内开发&#xff0c;所以没法连接外网&#xff0c;只能在本地电脑下载插件后&#xff0c;然后上传到虚拟机中&#xff0c;进行安装使用。 2&#xf…...

AKConv:具有任意采样形状和任意数目参数的卷积核

文章目录 摘要1、引言2、相关工作3、方法3.1、定义初始采样位置3.2、可变卷积操作3.3、扩展AKConv3.3、扩展AKConv 4、实验4.1、在COCO2017上的目标检测实验4.2、在VOC 712上的目标检测实验4.3、在VisDrone-DET2021上的目标检测实验4.4、比较实验4.5、探索初始采样形状 5、分析…...

如何使用C++开发集群服务

开发集群服务需要掌握以下技术&#xff1a; 分布式系统原理&#xff1a;了解集群的概念、工作原理、负载均衡、容错等相关概念。 网络编程&#xff1a;掌握Socket编程和HTTP协议等。 C编程&#xff1a;熟练掌握C语言的基础知识和STL等常用库。 多线程编程&#xff1a;了解线…...

docker安装以及idea访问docker

其他目录&#xff1a; docker 安装环境: https://blog.csdn.net/gd898989/article/details/134570167 docker 打包java包&#xff0c;并运行&#xff08;有空更新&#xff09; url “” docker 打包vue &#xff08;有空更新&#xff09; url “” docker 多服务 &#xff08;…...

激光切割头组件中喷嘴的作用是什么

喷嘴是一个不可忽视的部件。尽管喷嘴并不起眼&#xff0c;却有着重要的作用&#xff1b;喷嘴一般是与激光切割头同轴的&#xff0c;且形状多样&#xff1a;圆柱形、锥形、缩放型等。 喷嘴的口径尺寸时不相同的&#xff0c;大口径的喷嘴对聚焦来的激光束没有很严苛的要求;而口径…...

腾讯云双11活动最后一天,错过再等一年!

腾讯云双11活动已经进入尾声&#xff0c;距离活动结束仅剩最后一天&#xff0c;记得抓住这次上云好时机&#xff0c;错过这次&#xff0c;就要等到下一年才能享受到这样的优惠力度了&#xff01; 活动地址&#xff1a; 点此直达腾讯云双11活动主会场 活动详情&#xff1a; 1…...

Java实现飞翔的鸟小游戏

Java实现飞翔的鸟小游戏 1.准备工作 创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为**“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片**素材导入…...

Python网络请求初级篇:使用Requests库抓取和解析数据

在网络编程中&#xff0c;请求和接收数据是最常见的任务之一。Python的Requests库提供了丰富的功能&#xff0c;使得HTTP请求变得非常简单。在本文中&#xff0c;我们将了解如何使用Requests库发起HTTP请求&#xff0c;并解析返回的数据。 一、安装Requests库 首先&#xff0…...

详解API开发【电商平台API封装商品详情SKU数据接口开发】

1、电商API开发 RESTful API的设计 RESTful API是一种通过HTTP协议发送和接收数据的API设计风格。它基于一些简单的原则&#xff0c;如使用HTTP动词来操作资源、使用URI来标识资源、使用HTTP状态码来表示操作结果等等。在本文中&#xff0c;我们将探讨如何设计一个符合RESTfu…...

后端项目连接数据库-添加MyBatis依赖并检测是否成功

一.在pom.xml添加Mybatis相关依赖 在Spring Boot项目中&#xff0c;编译时会自动加载项目依赖&#xff0c;然后使用依赖包。 需要在根目录下pom.xml文件中添加Mybatis依赖项 <!-- Mybatis整合Spring Boot的依赖项 --> <dependency><groupId>org.mybatis.s…...

C++ CryptoPP使用RSA加解密

Crypto (CryptoPP) 是一个用于密码学和加密的 C 库。它是一个开源项目&#xff0c;提供了大量的密码学算法和功能&#xff0c;包括对称加密、非对称加密、哈希函数、消息认证码 (MAC)、数字签名等。Crypto 的目标是提供高性能和可靠的密码学工具&#xff0c;以满足软件开发中对…...

从实践角度深入探究数据驱动和关键字驱动测试方法!

数据驱动 数据驱动&#xff0c;指在软件测试领域当中的数据驱动测试&#xff08;Data-Driven Testing&#xff0c;简称DDT&#xff09;是⼀种软件测试⽅法&#xff0c;在不同的数据下重复执⾏相同顺序的测试步骤&#xff0c;测试脚本从数据源读取测试数据&#xff0c;⽽不使⽤…...

Unity收费对谁影响最大

Unity的收费政策对以下几类人群影响最大&#xff1a; 游戏开发商&#xff1a;Unity收费政策中最直接的影响对象就是游戏开发商。对于那些使用Unity引擎制作游戏的开发商来说&#xff0c;他们将需要考虑新的许可证费用和服务费用&#xff0c;这可能会对他们的盈利和发展产生影响…...

信号收尾.

sigaction 信号捕捉 它也是信号捕捉&#xff0c;不仅能处理普通信号还能处理实时信号&#xff0c;但我们不管实时信号 我们发现函数名和形参中结构体名一样都是sigaction&#xff0c;这在c/c中允许吗&#xff1f; 不建议&#xff0c;但是可以 signo你要捕捉几号信号 输入型参…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...