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,让组件编写更简洁,但需要插件支持组件命名。

相关推荐
LoveDreaMing6 分钟前
微前端-无界的实操和源码分析
前端·javascript·架构
修炼前端秘籍的小帅11 分钟前
精读《JavaScript 高级程序设计 第4版》第6章 集合引用类型(三)Map、WeakMap、Set、WeakSet
开发语言·javascript·ecmascript
@LetsTGBot搜索引擎机器人23 分钟前
打造属于你的 Telegram 中文版:汉化方案 + @letstgbot 搜索引擎整合教程
开发语言·python·搜索引擎·机器人·.net
去伪存真29 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香31 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
人工智能的苟富贵33 分钟前
使用 Tauri + Rust 构建跨平台桌面应用:前端技术的新边界
开发语言·前端·rust·electron
j_xxx404_34 分钟前
C++ STL:string类(3)|operations|string类模拟实现|附源码
开发语言·c++
拉不动的猪41 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
GHZero1 小时前
Java 之解读String源码(九)
java·开发语言
Swift社区1 小时前
Lombok 不生效 —— 从排查到可运行 Demo(含实战解析)
java·开发语言·安全