Vue 3 的 ＜script setup＞ 语法糖：简洁高效的组件开发新体验

目录

一、传统写法的对比

二、核心特性与优势

1. 自动暴露顶层绑定

2. 组件自动注册

3. 更简洁的 Props 和 Emits 声明

4. 响应式语法糖（实验性）

5. 更好的 TypeScript 支持

三、实际应用示例

组合式函数的使用

 异步组件与 Suspense

模板引用与组件方法暴露

四、最佳实践与注意事项

五、性能优势

总结

一、传统写法的对比

<!-- 传统 Composition API 写法 -->
<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      double,
      increment
    }
  }
}
</script>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

可以看到，<script setup> 移除了 setup() 函数和显式的 return 语句，让代码更加简洁！

二、核心特性与优势

1. 自动暴露顶层绑定

在 <script setup> 中，所有顶层绑定（变量、函数、import导入）都会自动暴露给模板，无需手动返回。

2. 组件自动注册

导入的组件会自动在模板中可用，无需在 components 选项中注册。

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <!-- 直接使用 -->
  <MyComponent />
</template>

3. 更简洁的 Props 和 Emits 声明

使用 defineProps 和 defineEmits 编译器宏：

<script setup>
const props = defineProps({
  title: String,
  likes: Number
})

const emit = defineEmits(['change', 'update'])
</script>

4. 响应式语法糖（实验性）

Vue 3.3+ 引入了响应式语法糖，进一步简化 ref 的使用：

<script setup>
let count = $ref(0) // 自动创建响应式引用

function increment() {
  count++ // 不需要 .value
}
</script>

5. 更好的 TypeScript 支持

<script setup> 提供了出色的 TypeScript 集成，类型推断更加自然：

<script setup lang="ts">
interface Props {
  title: string
  likes: number
}

const props = defineProps<Props>()
</script>

三、实际应用示例

组合式函数的使用

<script setup>
import { useMouse } from './mouse.js'

const { x, y } = useMouse()
</script>

<template>
  <p>鼠标位置: {{ x }}, {{ y }}</p>
</template>

 异步组件与 Suspense

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      加载中...
    </template>
  </Suspense>
</template>

模板引用与组件方法暴露

<script setup>
import { ref } from 'vue'

const inputRef = ref(null)

function focusInput() {
  inputRef.value.focus()
}

// 通过 defineExpose 暴露组件方法
defineExpose({
  focusInput
})
</script>

<template>
  <input ref="inputRef" type="text">
</template>

四、最佳实践与注意事项

1. 与普通 <script> 共存：需要额外选项（如自定义选项或全局组件）时，可以与普通 <script> 一起使用：

   <script>
   // 普通 <script>，在模块范围内执行
   export default {
     inheritAttrs: false,
     customOptions: {}
   }
   </script>
   
   <script setup>
   // <script setup> 逻辑
   </script>

2. 命名规范：建议对 defineProps 使用解构，保持命名一致性：

   <script setup>
   const { title, likes } = defineProps({
     title: String,
     likes: Number
   })
   </script>

3. 避免过度使用响应式语法糖：虽然方便，但仍在实验阶段，生产环境慎用

五、性能优势

<script setup> 在编译时进行了优化：

• 减少运行时开销

• 更好的 tree-shaking 支持

• 更高效的代码生成

总结

<script setup> 语法糖是 Vue 3 的一项重大改进，它：

•  显著减少样板代码

•  提供更直观的开发体验

•  增强 TypeScript 支持

•  保持 Composition API 的所有优势

•  提供更好的编译时优化

对于新项目，强烈推荐使用 <script setup> 作为默认写法；对于已有项目，可以逐步迁移以获得更好的开发体验和性能优化。