【Vue】<script setup>和 <script>区别是什么?在使用时的写法区别?
<script setup> 是 Vue 3 引入的一种新的脚本语法,它提供了一种更简洁和声明式的方式来编写组件逻辑。它是为了解决传统 <script> 标签在 Vue 单文件组件(SFC)中的一些局限性而设计的。
<script setup> 与 <script> 标签的主要区别:
<script setup> 的特点:
-
组合式 API:
<script setup>强制使用组合式 API,这是 Vue 3 推荐的方式来组织组件逻辑。 -
更少的样板代码:不需要
export default来暴露组件选项。 -
自动引入:在
<script setup>中定义的变量、函数等会自动在模板中可用,无需使用ref或reactive显式声明响应式状态。 -
更好的类型推断:TypeScript 支持更直接,不需要额外的类型声明。
-
更清晰的逻辑复用:通过组合式 API,逻辑可以更容易地在组件之间复用。
<script> 的特点:
-
选项式 API:使用
<script>标签时,你可以选择使用选项式 API 或组合式 API。 -
需要
export default:在<script>中,你需要使用export default来定义组件选项。 -
显式响应式声明:使用
ref、reactive、computed等函数显式声明响应式状态。 -
模板绑定:在模板中使用响应式状态时,需要通过
{{ }}插值或v-bind来绑定。
使用时的写法区别:
使用 <script setup>:
<script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}
</script><template><button @click="increment">{{ count }}</button>
</template>
使用 <script>:
<script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return { count, increment };},
};
</script><template><button @click="increment">{{ count }}</button>
</template>
在 <script setup> 中,count 和 increment 函数直接在模板中可用,而在 <script> 中,它们需要通过 return 语句从 setup 函数中返回,以便在模板中使用。
总的来说,<script setup> 提供了一种更现代、更简洁的方式来编写 Vue 组件,它鼓励使用组合式 API,并且减少了样板代码。随着 Vue 3 的普及,<script setup> 可能会成为编写 Vue 组件的主流方式。
相关文章:
【Vue】<script setup>和 <script>区别是什么?在使用时的写法区别?
<script setup> 是 Vue 3 引入的一种新的脚本语法,它提供了一种更简洁和声明式的方式来编写组件逻辑。它是为了解决传统 <script> 标签在 Vue 单文件组件(SFC)中的一些局限性而设计的。 <script setup> 与 <script>…...
微服务框架,Http异步编程中,如何保证数据的最终一致性
一、背景 在微服务框架下,跨服务之间的调用,当遇到操作耗时或者量大的情况,我们一般会采用异步编程实现。 本文出现的问题是:异步回调过来时,却未查询到数据库中的任务,导致未能正常处理回调。 下面是当…...
vue3-dom-diff算法
vue3diff算法 什么是vue3diff算法 Vue3中的diff算法是一种用于比较虚拟DOM树之间差异的算法,其目的是为了高效地更新真实DOM,减少不必要的重渲染 主要过程 整个过程主要分为以下五步 前置预处理后置预处理仅处理新增仅处理后置处理包含新增、卸载、…...
年会抽奖Html
在这里插入图片描述 <!-- <video id"backgroundMusic" src"file:///D:/background.mp3" loop autoplay></video> --> <divstyle"width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url(D:/nianhu…...
ubuntu16 重启之后lvm信息丢失故障恢复
一、背景 1、问题背景 业务有一台物理开发服务器,文件系统有损坏;由于重启时没有检查,导致重启卡住。后面通过断电重新启动之后,无法进入系统;进入救援模式,注释数据盘挂载。重启之后进入系统,…...
【华为OD-E卷 - 热点网站统计 100分(python、java、c++、js、c)】
【华为OD-E卷 - 热点网站统计 100分(python、java、c、js、c)】 题目 企业路由器的统计页面,有一个功能需要动态统计公司访问最多的网页URL top N。请设计一个算法,可以高效动态统计Top N的页面 输入描述 每一行都是一个URL或…...
Ubuntu下安装Android Sdk
下载android sdk命令行工具 https://developer.android.com/studio?hlzh-cn#command-tools mkdir android-sdk cd android-sdk unzip commandlinetools-linux-11076708_latest.zip 添加环境变量到~/.bashrc export ANDROID_HOME$HOME/android-sdk export PATH$PATH:$ANDRO…...
【JVM】总结篇-类的加载篇之 类的加载器 和ClassLoader分析
文章目录 类的加载器ClassLoader自定义类加载器双亲委派机制概念源码分析优势劣势如何打破Tomcat 沙箱安全机制JDK9 双亲委派机制变化 类的加载器 获得当前类的ClassLoader clazz.getClassLoader() 获得当前线程上下文的ClassLoader Thread.currentThread().getContextClassLoa…...
怎样修改el-table主题样式
起因:el-table有主题样式,部分需要单独设置 环境:ideanodejs插件谷歌浏览器 第一步:找到scss文件: 谷歌浏览器打开表格页面,ctrlshifti打开开发者工具,点击后鼠标移动到表格单元格上单击一下…...
MySQL(二)MySQL DDL数据库定义语言
1. MySQL DDL数据库定义语言 1.1. MySQL定义语言 进入MySQL mysql -u root -p(回车后输入密码,即可进入mysq1)1.1.1. 数据库操作 (1)查看数据库 mysql>show databases;注:MySQL语句分隔符为“;” mysql库很重要它里面有…...
Spring Boot 项目启动报 NoClassDefFoundError 异常的原因分析与解决方案 - jackson 版本不一致
目录 报错: 问题分析: 解决方案: 方案 1:对 Jackson 版本进行统一 方案 2:升级 Springfox 版本 方案 3:替换 Springfox 为 springdoc-openapi(推荐) 方案 4:排除冲突的 Jack…...
原型与原型链
什么是原型(对象) 在JavaScript中,每个对象都具有一个原型对象prototype,目的是:利用原型对象实现在同一原型链中的原型方法共享 在理解原型对象前,需要先了解什么是构造函数 构造函数 用来初始化对象的…...
【Linux】信号处理
一、Linux系统信号 1、常见的系统信号 常见的Linux系统信号 信号值描述1SIGHUP挂起(hang up)进程2SIGINT中断进(interrupt)程3SIGQUIT停止(stop)进程9SIGKILL无条件终止(terminate)…...
5个不同类型的mysql数据库安装
各种社区版本下载官方地址:MySQL :: MySQL Community Downloads 一、在线YUM仓库(Linux) 选择 MySQL Yum Repository 选择对应版本下载仓库安装包(No thanks, just start my download.) 下载方法1:下载到本…...
python学习笔记—12—布尔类型、if语句
1. 布尔类型 (1) 定义 (2) 比较运算符 (3) 代码演示 1. 手动定义 bool_1 True bool_2 False print(f"bool_1的内容是:{bool_1}, 类型是:{type(bool_1)}") print(f"bool_2的内容是:{bool_2}, 类型是:{type(bool…...
分数阶傅里叶变换代码 MATLAB实现
function Faf myfrft(f, a) %分数阶傅里叶变换函数 %输入参数: %f:原始信号 %a:阶数 %输出结果: %原始信号的a阶傅里叶变换N length(f);%总采样点数 shft rem((0:N-1)fix(N/2),N)1;%此项等同于fftshift(1:N),起到翻…...
《数据结构》期末考试测试题【中】
《数据结构》期末考试测试题【中】 21.循环队列队空的判断条件为?22. 单链表的存储密度比1?23.单链表的那些操作的效率受链表长度的影响?24.顺序表中某元素的地址为?25.m叉树第K层的结点数为?26. 在双向循环链表某节点…...
openwrt 清缓存命令行
一、查看缓存 : free -m 二、清缓存:echo 3 > /proc/sys/vm/drop_caches 三、详解。 释放物理页缓存 echo 1 > /proc/sys/vm/drop_caches 释放可回收的slab对象,包含inode and dentry echo 2 > /proc/sys/vm/drop_caches 同时…...
RP2K:一个面向细粒度图像的大规模零售商品数据集
这是一种用于细粒度图像分类的新的大规模零售产品数据集。与以往专注于相对较少产品的数据集不同,我们收集了2000多种不同零售产品的35万张图像,这些图像直接在真实的零售商店的货架上拍摄。我们的数据集旨在推进零售对象识别的研究,该研究具…...
.NET Core FluentAPI
目录 约定配置 主要规则 两种配置方式 Data Annotation Fluent API Fluent API配置 Fluent API众多方法 选择 约定配置 主要规则 表名采用DbContext中的对应的DbSet的属性名。数据表列的名字采用实体类属性的名字,列的数据类型采用和实体类属性类型最兼容…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
