setup 语法糖核心要点

1. 基本语法

javascript 复制代码
<!-- 传统写法 -->
<script lang="ts">
export default {
  setup() {
    let name = '张三'
    function changeName() { name = '李四' }
    return { name, changeName }
  }
}
</script>

<!-- 语法糖写法 -->
<script setup lang="ts">
let name = '张三'
function changeName() { name = '李四' }
// 无需 return,自动暴露给模板
</script>

2. 关键特性

✅ 自动暴露

  • 顶层变量、函数自动暴露给模板
  • 无需手动 return

✅ 组件自动注册

javascript 复制代码
<script setup>
import Person from './Person.vue'
// 无需在 components 中注册,直接使用
</script>
<template>
  <Person/>  <!-- 直接使用 -->
</template>

✅ 编译器宏?

javascript 复制代码
<script setup>
// Props 定义
const props = defineProps<{ message: string }>()

// Emits 定义  
const emit = defineEmits<{ 'my-event': [data: string] }>()

// 暴露方法给父组件
defineExpose({ publicMethod })
</script>

3. 组件名称问题

问题:<script setup> 无法直接设置组件名

javascript 复制代码
<script setup name="Person">  <!-- ❌ 这样不行 -->

解决方案:使用 Vite 插件

javascript 复制代码
npm i vite-plugin-vue-setup-extend -D
javascript 复制代码
// vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), VueSetupExtend()]
})

然后就可以:

javascript 复制代码
<script setup name="Person">  <!-- ✅ 现在可以了 -->

对比总结

| 特性 | 传统 setup() | <script setup> |

|------|-------------|------------------|

| 代码量 | 多(需要 return) | 少(自动暴露) |

| 组件注册 | 需要手动注册 | 自动注册 |

| 类型支持 | 一般 | 优秀 |

| 学习成本 | 中等 | 低 |

一句话总结:<script setup> 是 Vue 3 的"零配置"组合式 API,让组件编写更简洁,但需要插件支持组件命名。

相关推荐
SUPER526623 分钟前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx1833 分钟前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
Overboom2 小时前
[C++] --- 常用设计模式
开发语言·c++·设计模式
Univin2 小时前
C++(10.4)
开发语言·数据结构·c++
KyollBM3 小时前
每日羊题 (质数筛 + 数学 | 构造 + 位运算)
开发语言·c++·算法
你的人类朋友3 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar3 小时前
FunASR 前端语音识别代码解析
前端·面试·github
Paul_09204 小时前
golang面经——map模块和sync.Map模块
开发语言
Univin4 小时前
C++(10.5)
开发语言·c++·算法
haogexiaole5 小时前
Java高并发常见架构、处理方式、api调优
java·开发语言·架构