在vue 3开发中，你肯定见过这样的组件代码：

<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的主要好处

五、什么时候该用它？

如果你在使用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，体验会非常流畅。

链接: https://fly63.com/article/detial/12823