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

【Vue3】浅谈setup语法糖

Vue3 的 setup 语法糖是通过 <script setup> 标签启用的特性,它是对 Composition API 的进一步封装,旨在简化组件的声明式写法,同时保留 Composition API 的逻辑组织能力。以下是其核心概念和原理分析:


一、<script setup> 是什么?

  1. 语法糖本质
    它是 Vue3 编译器在编译阶段对组件逻辑的语法转换工具。开发者用更简洁的语法编写逻辑,最终会被编译成标准 setup() 函数的返回形式。

  2. 主要特性

    • 自动暴露顶层变量(无需 return
    • 直接使用 await(自动生成异步包装)
    • 组件/指令自动注册(无需 components 选项)
    • 支持 TypeScript 类型推导(如 defineProps

二、语法糖的编译原理

以下是一个代码转换示例,展示 <script setup> 如何被编译为传统写法:

原始代码(语法糖):
<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'const count = ref(0)
const increment = () => count.value++
</script>
编译后代码:
export default {setup() {const count = ref(0)const increment = () => count.value++// 自动返回所有顶层变量return {count,increment,MyComponent // 自动注册组件}},components: {MyComponent // 编译器自动处理组件注册}
}

三、关键技术实现

  1. 编译阶段转换
    Vue 编译器(如 @vue/compiler-sfc)会在构建时:

    • 提取 <script setup> 中的顶层变量
    • 自动生成 return 语句暴露这些变量
    • import 的组件转换为 components 选项
  2. 响应式绑定
    refreactive 变量会被编译器识别,生成对应的 Proxy 响应式代码。

  3. 宏函数处理
    definePropsdefineEmits 是编译时的特殊宏,编译器会将其转换为标准的 props/emits 声明:

    <script setup>
    const props = defineProps({ msg: String })
    const emit = defineEmits(['submit'])
    </script>
    

    编译为:

    export default {props: { msg: String },emits: ['submit'],setup(props, { emit }) {// ...}
    }
    

    需要注意的是,Vue从3.5版本开始,已经支持响应式解构Props,也就是当在同一个 script setup 块中的代码访问从 defineProps 解构出的变量时,Vue 的编译器会自动在前面添加 props.

    const { foo } = defineProps(['foo'])watchEffect(() => {// 在 3.5 之前仅运行一次// 在 3.5+ 版本中会在 "foo" prop 改变时重新运行console.log(foo)})
    

    编译为:

    const props = defineProps(['foo'])watchEffect(() => {// `foo` 由编译器转换为 `props.foo`console.log(props.foo)})
    

四、优势与适用场景

特性传统 setup 函数<script setup>
代码量需显式 return自动暴露顶层变量
组件注册需在 components 声明自动注册导入的组件
异步逻辑需手动包装异步上下文直接使用 await
TypeScript 支持需类型断言自动推导 props/emit 类型

适用场景:适用于需要清晰逻辑组织的复杂组件,尤其是需要 TypeScript 强类型支持或大量 Composition API 复用的场景。


五、@vue/compiler-sfc核心解析

@vue/compiler-sfc是Vue官方的单文件(SFC)编译器,负责将.vue文件解析为标准的JavaScript模块,它的主要任务包括:

  1. 分离<template><script><style> 三大块
  2. 处理模版编译为渲染函数
  3. 转换 <script setup> 语法糖
  4. 处理 CSS 作用域(Scoped CSS)
关键功能实现
  • 模板编译
    将 HTML-like 模板转换为 虚拟 DOM 渲染函数

    <!-- 输入 -->
    <template><div @click="count++">{{ count }}</div>
    </template>
    
    // 输出渲染函数
    import { createElementVNode as _createElementVNode } from "vue"
    export function render(_ctx) {return _createElementVNode("div", { onClick: _ctx.increment }, _toDisplayString(_ctx.count))
    }
    
  • <script setup> 转换
    将顶层变量自动注入 setup() 返回对象:

    <script setup>
    import { ref } from 'vue'
    const count = ref(0)
    </script>
    
    // 转换后
    export default {setup() {const count = ref(0)return { count } // 自动注入}
    }
    
  • CSS 作用域处理
    为 Scoped CSS 添加唯一哈希属性:

    <style scoped>
    .box { color: red; }
    </style>
    
    .box[data-v-5f8d2c] { color: red; }
    
与其他工具协作
  • 与 Vite:通过 @vitejs/plugin-vue 插件集成,实现开发时热更新
  • 与 Webpack:通过 vue-loader 调用 @vue/compiler-sfc
  • 与 TypeScript:通过 defineProps/defineEmits 实现类型推导
SFC在线演练场

访问Vue SFC Playground直接输入 Vue SFC 代码,右侧会实时显示编译后的 JavaScript 代码。

在这里插入图片描述


六、总结

通过编译时的智能转换,<script setup> 在保持逻辑组织能力的同时,大幅减少了样板代码,是 Vue3 开发的高效实践方案。

以上就是对 setup 语法糖的一点点介绍啦^-^

相关文章:

【Vue3】浅谈setup语法糖

Vue3 的 setup 语法糖是通过 <script setup> 标签启用的特性&#xff0c;它是对 Composition API 的进一步封装&#xff0c;旨在简化组件的声明式写法&#xff0c;同时保留 Composition API 的逻辑组织能力。以下是其核心概念和原理分析&#xff1a; 一、<script setu…...

EasyRTC嵌入式WebRTC技术与AI大模型结合:从ICE框架优化到AI推理

实时通信技术在现代社会中扮演着越来越重要的角色&#xff0c;从视频会议到在线教育&#xff0c;再到远程医疗&#xff0c;其应用场景不断拓展。WebRTC作为一项开源项目&#xff0c;为浏览器和移动应用提供了便捷的实时通信能力。而EasyRTC作为基于WebRTC的嵌入式解决方案&…...

如何管理路由器

一、管理路由器的必要性 1、需要修改拨号上网的密码。 2、需要修改WIFI的SSID名字和密码。 3、设置DHCP协议信息。 4、设置IP地址的过滤规则。 5、给某个设备连接设置网络限速。 二、常见的方式 (一)web网页方式 1、计算机用双绞线或者WIFI的方式连接路由器。 2、在计算机中打开…...

【NTN 卫星通信】低轨卫星通信需要解决的关键问题

1 低轨卫星通信需要考虑的关键问题 3GPP在开始阶段对低轨卫星通信需要面对的关键问题对架构的影响进行了探讨&#xff0c;主要在协议23.737中&#xff0c;我们来看看有哪些内容吧。 2 关键问题讨论 2.1 大型卫星覆盖区域的移动性管理 PLMN的覆盖区域受到HPLMN母国监管机构的限…...

DOM HTML:深入理解与高效运用

DOM HTML:深入理解与高效运用 引言 随着互联网的飞速发展,前端技术逐渐成为软件开发中的关键部分。DOM(文档对象模型)和HTML(超文本标记语言)是前端开发中的基石。本文将深入探讨DOM和HTML的概念、特性以及在实际开发中的应用,帮助读者更好地理解和使用这两项技术。 …...

如何进行OceanBase 运维工具的部署和表性能优化

本文来自OceanBase 用户的实践分享 随着OceanBase数据库应用的日益深入&#xff0c;数据量不断攀升&#xff0c;单个表中存储数百万乃至数千万条数据的情况变得愈发普遍。因此&#xff0c;部署专门的运维工具、实施针对性的表性能优化策略&#xff0c;以及加强指标监测工作&…...

docker简介-学习与参考

docker Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 容器是完全使用沙箱…...

AcWing 蓝桥杯集训·每日一题2025·密接牛追踪2

密接牛追踪2 农夫约翰有 N 头奶牛排成一排&#xff0c;从左到右依次编号为 1∼N。 不幸的是&#xff0c;有一种传染病正在蔓延。 最开始时&#xff0c;只有一部分奶牛受到感染。 每经过一个晚上&#xff0c;受感染的牛就会将病毒传染给它左右两侧的牛&#xff08;如果有的话…...

LeetCode 每日一题 2025/2/24-2025/3/2

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 2/24 1656. 设计有序流2/25 2502. 设计内存分配器2/26 1472. 设计浏览器历史记录2/27 2296. 设计一个文本编辑器2/28 2353. 设计食物评分系统3/1 131. 分割回文串3/2 132. …...

TeX Live 2025 最新版安装与中文环境配置全教程(Windows/Mac/Linux)

一、软件定位与特性 TeX Live 是由国际TeX用户组&#xff08;TUG&#xff09;维护的跨平台专业排版系统&#xff0c;支持LaTeX、XeLaTeX等多种排版引擎&#xff0c;广泛应用于学术论文、书籍出版等领域。2025版核心升级&#xff1a; 智能编译&#xff1a;自动检测编码错误并提…...

Android实现漂亮的波纹动画

Android实现漂亮的波纹动画 本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果&#xff08;波纹大小变化、画笔透明度变化、画笔粗细变化&#xff09; 一、UI界面 界面主要分为三部分 第一部分&#xff1a;输入框&#xff0c;根据输入x轴、Y轴、Z轴倾…...

JAVA学习笔记038——bean的概念和常见注解标注

什么是bean? Bean 就是 被 Spring 管理的对象&#xff0c;就像工厂流水线上生产的“标准产品”。这些对象不是你自己 new 出来的&#xff0c;而是由 Spring 容器&#xff08;一个超级工厂&#xff09;帮你创建、组装、管理。 由 Component、Service、Controller 等注解标记的…...

自然语言处理NLP入门 -- 第十节NLP 实战项目 2: 简单的聊天机器人

一、为什么要做聊天机器人&#xff1f; 在互联网时代&#xff0c;我们日常接触到的“在线客服”“自动问答”等&#xff0c;大多是以聊天机器人的形式出现。它能帮我们快速回复常见问题&#xff0c;让用户获得及时的帮助&#xff0c;并在一定程度上减少人工客服的压力。 同时&…...

【网络安全 | 渗透工具】小程序反编译分析源码 | 图文教程

未经许可,禁止转载。 本文仅供学习使用,严禁用于非法渗透测试,笔者不承担任何责任。 文章目录 1、下载Proxifier2、下载反编译工具unveilr3、寻找小程序文件包4、对文件包进行反编译5、对源码进行分析6、渗透思路6.1、查找敏感信息泄露6.2、解析加解密逻辑6.3、枚举 API 接口…...

uniapp 系统学习,从入门到实战(六)—— 样式与布局

全篇大概 4700 字(含代码)&#xff0c;建议阅读时间 30min &#x1f4da; 目录 Flex 布局在 UniApp 中的应用响应式设计与适配多端使用 SCSS 提升样式开发效率实战案例演示总结 1. Flex 布局在 UniApp 中的应用 1.1 基础布局实现 通过 display: flex 快速构建弹性容器&#…...

‘ts-node‘ 不是内部或外部命令,也不是可运行的程序

新建一个test.ts文件 let message: string = Hello World; console.log(message);如果没有任何配置的前提下,会报错’ts-node’ 不是内部或外部命令,也不是可运行的程序。 此时需要安装一下ts-node。 npm install...

mysql 全方位安装教程

下载 MySQL 【官网下载地址】 注意要选择较大的哪个安装包&#xff0c;小的安装包是一个安装器。 我们不用登录&#xff0c;直接下载 直接运行下载好的安装包 MySQL如果是 安装包安装, 可以图形化界面自主配置 如果是压缩包解压, 可以配置 配置文件, 可以解压安装到指定的…...

22-接雨水

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 方法一&#xff1a;双指针法 思路 使用两个指针 left 和 right 分别指向数组的两端&#xff0c;同时记录左边的最大高度 leftMax 和右边的最大高度 rig…...

使用Spring Boot与达梦数据库(DM)进行多数据源配置及MyBatis Plus集成

使用Spring Boot与达梦数据库(DM)进行多数据源配置及MyBatis Plus集成 在现代企业级应用开发中&#xff0c;处理多个数据源是一个常见的需求。本文将详细介绍如何使用Spring Boot结合达梦数据库&#xff08;DM&#xff09;&#xff0c;并通过MyBatis Plus来简化数据库操作&…...

leetcode28 找出字符串第一个匹配值的下标 KMP算法

KMP 算法——快速的从主串中找到模式串 当出现字符串不匹配时&#xff0c;可以知道一部分之前已经匹配的文本内容&#xff0c;可以利用这些信息避免从头再去做匹配了。 KMP 算法 比较指针不回溯&#xff0c;仅仅是后移模式串。 每次不匹配的时候&#xff0c;找之前已匹配部分…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

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

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

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...