关于<script setup>语法糖

你好！

<script setup> 是 Vue 3 中引入的一个语法糖 (Syntax Sugar)，专门用于在单文件组件 (SFC) 中更简洁、更高效地使用组合式 API (Composition API)。

简单来说，它是一种编译时的优化，让你可以用更少的模板代码来编写 Vue 组件的 setup 逻辑。

🚀 它解决了什么问题？

在 <script setup> 出现之前，使用组合式 API（Composition API）的标准方式是这样的：

Code snippet

<script>
import { ref, onMounted } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  // 1. 必须注册组件
  components: {
    MyComponent
  },

  // 2. 必须定义 setup 函数
  setup() {
    // 3. 定义响应式数据
    const count = ref(0)

    // 4. 定义方法
    function increment() {
      count.value++
    }

    // 5. 使用生命周期钩子
    onMounted(() => {
      console.log('组件已挂载')
    })

    // 6. 必须显式 return 所有需要暴露给模板的数据和方法
    return {
      count,
      increment,
      MyComponent // (MyComponent 也需要在这里返回吗？不，它在 components 中注册了)
      // 注意：这里很容易混淆，哪些需要 return，哪些在 components 注册
    }
  }
}
</script>

这种写法虽然可行，但有几个痛点：

1. 模板代码多：你需要写 export default { setup() { ... } }。
2. 必须 return：所有要在 <template> 中使用的变量、函数，都必须在 setup 函数的末尾 return 出来，非常繁琐且容易遗漏。
3. 心智负担：你需要区分哪些是 data()、methods（选项式 API），哪些是 setup 内部的。

✨ <script setup> 的优势与写法

使用 <script setup> 后，上面的代码可以被极大地简化：

Code snippet

<script setup>
import { ref, onMounted } from 'vue'
import MyComponent from './MyComponent.vue' // 1. 导入的组件自动可用

// 2. 定义响应式数据
const count = ref(0)

// 3. 定义方法
function increment() {
  count.value++
}

// 4. 使用生命周期钩子
onMounted(() => {
  console.log('组件已挂载')
})

// 5. 不需要 export default，不需要 setup()，不需要 return
// 这里的 'count', 'increment' 和 'MyComponent' 自动暴露给 <template>
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
  <MyComponent />
</template>

<script setup> 的核心优势非常明显：

1. 代码更简洁 (More Concise)