所谓“语法糖”，是指在编程语言中提供的一种简化语法结构，其目的在于使代码编写更加简洁直观，从而提升开发效率，而不会对语言的核心功能产生任何影响。

传统 Composition API 写法的不便

在 Vue 3 的 Composition API 标准写法中，我们通常需要将逻辑定义在 setup() 函数内，并且必须将需要模板访问的数据和方法显式返回：

vue

<script lang="ts">

import { ref } from 'vue'

export default {

   name: 'Person',

   setup() {

       let name = ref('张三')

       let age = ref(23)

       let tel = ref(17766668888)

       function changeName() {

           name.value = "zhangsan"

       }

       function changeAge() {

           age.value += 1

       }

       function showTel() {

           alert(tel.value)

       }

       return { name, age, changeName, changeAge, showTel }

   }

}</script>

这种写法的核心问题在于：开发者需要额外关注 setup() 函数的包裹结构和 return 语句，所有在模板中使用的变量和方法都必须手动导出，这增加了不必要的代码量和维护成本。

<script setup> 语法糖的简洁实现

通过使用 <script setup> 语法糖，上述代码可以得到显著简化：

vue

<script lang="ts" setup>

   import { ref } from 'vue'

   let name = ref('张三')

   let age = ref(23)

   let tel = ref(17766668888)

   function changeName() {

       name.value = "zhangsan"

   }

   function changeAge() {

       age.value += 1

   }

   function showTel() {

       alert(tel.value)

   }</script>

语法糖的核心优势

语法简化：无需再编写 setup() {} 函数体，代码结构更加扁平化；

自动导出：所有顶层声明的变量、函数均会自动在模板中可用，无需手动 return；

组件自动注册：在语法糖中导入的组件无需手动注册即可直接在模板中使用（此点虽未在示例中展示，但也是一个重要便利特性）。、

解决组件命名问题

在早期版本中，若需定义组件名称，往往需要额外添加一个 <script> 块，这显得颇为繁琐。自 Vue 3.3 起，提供了 defineOptions 宏来优雅地解决此问题：

vue

<script lang="ts" setup>

   defineOptions({

       name: "Person_demo"

   })

   import { ref } from 'vue'

   // ...其余逻辑保持不变</script>

注意：defineOptions 是 Vue 3.3 及以上版本的新特性。若您使用的版本低于此，可以通过 unplugin-vue-define-options 插件获得兼容支持。

总结

<script setup> 语法糖通过精简代码结构、实现自动导出和组件注册，极大地提升了 Vue 3 开发的简洁性和开发体验，是使用 Composition API 时推荐的书写方式。