Vue script setup到底做了什么？一文看懂它的作用和用法
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>这种写法就是Vue script setup。它到底做了什么？为什么大家都在用？今天我们就彻底搞清楚。
一、它本质上是一种语法糖
<script setup> 不是新功能，它是Vue 3组合式api的一种简化写法。Vue官方在3.2版本将它标记为稳定特性。
二、它解决了什么问题？
传统Options API写法中，我们需要在setup()函数里声明变量和方法，最后必须return出去才能被模板使用：
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
// 必须手动返回！
return {
count,
increment
}
}
}
</script><script setup> 的核心作用就是自动处理这个return过程。它让代码更简洁：
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
// 不需要return！直接就能在模板中使用 count 和 increment
</script>三、它具体做了哪些事？
自动暴露顶层变量/函数：在 <script setup> 中声明的变量、函数、import导入内容，自动暴露给模板，无需手动返回。
简化组件注册：导入的组件直接就能在模板里使用：
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<MyComponent /> <!-- 直接使用，无需components注册 -->
</template>简化Props和Emit声明：使用专用宏定义：
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
title: String
})
const emit = defineEmits(['change', 'submit'])
function handleClick() {
emit('change', newValue) // 触发事件
}
</script>更好的TypeScript支持：配合TypeScript类型推导更自然，减少类型声明代码。
四、使用script setup的主要好处
- 代码量大大减少：省略了繁琐的setup()函数结构和return语句。
- 代码更易读：逻辑更集中，组件结构更扁平。
- 更好的TS体验：类型推断更直接准确。
- 更高的运行时性能：内部编译优化更彻底（细微差别，但确实存在）。
五、什么时候该用它？
如果你在使用Vue 3的组合式API，<script setup> 是目前最推荐、最主流的写法。它代表了Vue官方推荐的组件编写方式。
六、一些使用注意点
模板中访问的是编译时的状态：<script setup> 中的代码在组件每次创建实例时都会执行一次。
顶层作用域绑定：只有顶层（不在函数/块作用域内）的变量/函数才会暴露给模板。
与普通<script>共存：如果需要声明模块级别的选项（如name、inheritAttrs）或使用无法在setup中表达的选项，可以用一个普通的<script> 块（通常与<script setup> 一起使用，但需要设置不同的lang或类型）。
总结一下：
Vue script setup的核心作用就是让组合式API的代码写起来更简单、更清爽。它通过编译时的魔法，自动帮你处理了变量暴露、组件注册等样板代码。它极大地提升了开发效率和代码可维护性，是Vue 3现代组件开发的基石。如果你想写更干净利落的Vue代码，掌握<script setup> 是必经之路。
新手提示：如果你是Vue初学者，建议先理解基础的Options API和组合式API概念，再上手script setup会更容易。实际项目中，搭配Volar(VSCode插件)和TypeScript，体验会非常流畅。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
