<script>和<script setup>的区别

devtools/2024/9/25 3:55:04/

在Vue 3中,<script setup>是Composition API的一个语法糖,它提供了一种更简洁的方式来编写组件逻辑。使用<script setup>,您可以在组件外部直接导入或定义方法和响应式数据,而不需要在setup()函数内部进行。

<script setup> 是Vue 3的Composition API的一个语法糖,它允许你以更声明式的方式编写组件。当你在<script>标签中使用<script setup>时,你可以直接在组件作用域内声明响应式状态和计算属性,而不需要在setup()函数内部。

lang="ts"是为TypeScript声明的,它告诉Vue你正在使用TypeScript作为项目的开发语言。

以下是<script setup>与常规<script>标签使用Composition API的对比示例:

使用<script setup>:

<template><div><h1>{{ count }}</h1><button @click="increment">Increment</button></div>
</template><script setup lang="ts">
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++;
};
</script>

在这个例子中,我们使用了<script setup>,并且因为是在<script setup>上下文中,所以可以直接使用ref声明响应式状态count,并且可以直接定义方法increment,而不需要将其包装在setup()函数中。

使用常规<script>:

<template><div><h1>{{ count }}</h1><button @click="increment">Increment</button></div>
</template><script lang="ts">
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
};
</script>

以下是<script setup>与常规<script>标签使用Composition API的主要区别:

  1. 导入和导出:

    • 常规<script>: 您需要在setup()函数内部导入所需的Composition API函数,如ref, reactive, computed等,并且您不能从外部直接导出或导入任何东西。
    • <script setup>: 您可以像在模块中一样直接导入和导出函数、响应式数据等,不必包装在setup()函数中。
  2. 响应式数据的使用:

    • 常规<script>: 您需要通过setup()返回的对象来暴露需要响应式的数据和方法,这样它们才能在模板或其他组件中使用。
    • <script setup>: 您定义的响应式数据(使用ref, reactive, computed等)默认就是可响应式的,并且可以直接在模板中使用,无需额外的暴露步骤。
  3. 代码结构:

    • 常规<script>: 遵循Vue 3 Composition API的标准结构,所有的逻辑都封装在setup()函数中。
    • <script setup>: 提供了一种更扁平化和直观的代码结构,可以减少模板和逻辑之间的跳转,提高代码的可读性。
  4. TypeScript支持:

    • 常规<script>: 需要在setup()函数的参数中明确类型,如使用Props, Context等。
    • <script setup>: 提供了更好的类型推断,因为定义的响应式变量可以直接用于模板,所以类型信息更清晰。
  5. 生命周期钩子:

    • 常规<script>: 生命周期钩子如onMounted, onUpdated等需要在setup()中使用。
    • <script setup>: 允许您直接使用生命周期钩子,如onMounted, onUpdated等,而不需要在setup()内部。
  6. 模板引用:

    • 常规<script>: 使用setup()的返回值来定义模板引用,如refreactive对象的属性。
    • <script setup>: 可以直接在模板中使用定义的响应式变量,无需通过返回值引用。

使用<script setup>可以减少样板代码,使组件更加简洁。但是,它也有一些限制,比如不支持选项式API(如data, computed, watch等),并且某些高级用例可能需要在setup()内部实现。


http://www.ppmy.cn/devtools/4328.html

相关文章

屏幕状态自动检测+鼠标自动操作

目录 一、写在前面 1.1适用场景 1.2涉及到的库 二、函数库 2.1pyautogui-屏幕截图&鼠标操作 2.1.1屏幕截图screenshot函数 2.1.2鼠标移动及单击 2.2Opencv-模板匹配 2.2.1matchTemplate函数 2.2.2minMaxLoc函数 2.2.3相关代码 2.3base64-图片转base64 2.3.1在线…

Linux环境部署MySQL

LINUX环境下部署MySQL MySQL官网&#xff1a;https://www.mysql.com/ MySQL是一种关系型数据库管理系统&#xff0c;所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策&#xff0c;分为社区版和商业版&#xff0c;由于其体积小、速度快、总体…

若依框架后台管理系统_修改后台管理密码

若依框架后台管理系统_修改后台管理密码 1. 找见加密函数&#xff1a; /*** 生成BCryptPasswordEncoder密码** param password 密码* return 加密字符串*/public static String encryptPassword(String password){BCryptPasswordEncoder passwordEncoder new BCryptPasswordE…

关于Python中install edge_tts记录

如下代码&#xff1a; #!/usr/bin/env python3""" Basic audio streaming example.This example shows how to stream the audio data from the TTS engine, and how to get the WordBoundary events from the engine (which could be ignored if not needed).…

PHP 爬虫如何配置代理 IP(CURL 函数)

在 PHP中 配置代理IP&#xff0c;可以通过设置 CURL 库的选项来实现&#xff0c;代码如下&#xff1a; 当然你要有代理ip来源&#xff0c;比如我用的这个 代理商 &#xff0c;如果想服务稳定不建议找开源代理池&#xff0c;避免被劫持。 <?php // 初始化cURL会话 $ch cu…

外包干了10天,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;2019年我通过校招踏入了南京一家软件公司&#xff0c;开始了我的职业生涯。那时的我&#xff0c;满怀热血和憧憬&#xff0c;期待着在这个行业中闯出一片天地。然而&#xff0c;随着时间的推移&#xff0c;我发现自己逐渐陷入…

计算公式基础

文章目录 MASMAEXMPA加权移动平均线成交量换手率MACDKDJ MA 均线一般指移动平均线。 移动平均线&#xff0c;Moving Average&#xff0c;简称MA&#xff0c;MA是用统计分析的方法&#xff0c;将一定时期内的证券价格&#xff08;指数&#xff09;加以平均&#xff0c;并把不同…

战姬物语部署

一.准备环境 #关闭seliunx和防火墙 setenforce 0 systemctl stop firewalld systemctl disable firewalld #配置源&#xff0c;并安装常用工 curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo …