你是不是还在为 Vue 组件的那些繁琐语法头疼？每次写个组件都要 export default、methods、data 来回折腾，感觉代码总是啰里啰嗦的？

告诉你个好消息，Vue3 的 <script setup> 语法糖简直就是为我们这些追求效率的开发者量身定做的！它能让你用更少的代码做更多的事，而且写起来那叫一个爽快。

今天我就带你彻底搞懂这个功能，从基本用法到高级技巧，保证让你看完就能用上，代码量直接减半！

什么是 <script setup>？

简单来说，<script setup> 是 Vue3 引入的一种编译时语法糖，它能让单文件组件的脚本部分变得更加简洁明了。

以前我们写个组件得这样：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

现在用 <script setup> 就简单多了：

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

const count = ref(0)

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

看出来了吧？代码一下子清爽了很多！不再需要那些模板化的结构，直接写逻辑就行。

为什么要用 <script setup>？

你可能要问，我已经习惯原来的写法了，为什么要换呢？这里给你几个无法拒绝的理由：

代码量大幅减少，不用再写那些重复的样板代码。组件间的数据传递和事件处理变得更加直观。更好的 TypeScript 支持，类型推断更加准确。编译时优化，性能更优秀。

最重要的是，写起来真的很快乐！你再也不用在 methods、data、computed 之间来回切换了。

基础用法速成

让我们从最简单的开始，一步步掌握 <script setup> 的核心用法。

定义响应式数据，在 <script setup> 里，我们直接用 ref 和 reactive：

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

// 基本类型用 ref
const name = ref('张三')
const age = ref(25)

// 对象类型可以用 reactive
const userInfo = reactive({
  job: '前端开发',
  salary: 20000
})

// 修改数据也很简单
const updateInfo = () => {
  name.value = '李四'  // ref 需要通过 .value 访问
  userInfo.salary = 25000 // reactive 直接修改属性
}
</script>

定义方法就更简单了，直接写函数就行：

<script setup>
const sayHello = () => {
  console.log('你好，Vue3！')
}

const calculate = (a, b) => {
  return a + b
}
</script>

计算属性也用起来：

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

const price = ref(100)
const quantity = ref(2)

// 计算总价
const total = computed(() => {
  return price.value * quantity.value
})

// 复杂的计算属性
const discountTotal = computed(() => {
  const totalVal = price.value * quantity.value
  return totalVal > 200 ? totalVal * 0.9 : totalVal
})
</script>

组件通信变得超简单

在 <script setup> 里，组件间的通信也变得特别直观。

定义 props 可以用 defineProps：

<script setup>
// 基础用法
defineProps(['title', 'content'])

// 带类型检查的用法
defineProps({
  title: String,
  content: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})

// 用 TypeScript 的话更简单
defineProps<{
  title?: string
  content: string
  count?: number
}>()
</script>

定义 emits 用 defineEmits：

<script setup>
// 基础用法
const emit = defineEmits(['update', 'delete'])

// 带验证的用法
const emit = defineEmits({
  update: (id) => {
    if (id) return true
    console.warn('需要提供 id')
    return false
  }
})

// 实际使用
const handleUpdate = () => {
  emit('update', 123)
}

const handleDelete = () => {
  emit('delete', 456)
}
</script>

高级技巧让你更专业

掌握了基础用法，再来看看一些提升效率的高级技巧。

使用组合式函数，这是 Vue3 的精髓之一：

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

// 封装一个获取数据的组合式函数
const useFetch = (url) => {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return {
    data,
    loading,
    error,
    refetch: fetchData
  }
}

// 在组件中使用
const { data: userData, loading, error } = useFetch('/api/user')
</script>

使用 defineExpose 暴露组件方法：

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

const count = ref(0)

const increment = () => {
  count.value++
}

const reset = () => {
  count.value = 0
}

// 暴露给父组件的方法
defineExpose({
  increment,
  reset
})
</script>

使用 useSlots 和 useAttrs：

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()

// 可以动态处理插槽和属性
const hasHeaderSlot = !!slots.header
const extraClass = attrs.class || ''
</script>

实战案例：打造一个任务管理器

光说不练假把式，我们来写个完整的任务管理组件：

<template>
  <div class="task-manager">
    <div class="add-task">
      <input 
        v-model="newTask" 
        @keyup.enter="addTask"
        placeholder="输入新任务..."
        class="task-input"
      >
      <button @click="addTask" class="add-btn">添加</button>
    </div>
    
    <div class="task-list">
      <div 
        v-for="task in filteredTasks" 
        :key="task.id"
        :class="['task-item', { completed: task.completed }]"
      >
        <input 
          type="checkbox" 
          v-model="task.completed"
          class="task-checkbox"
        >
        <span class="task-text">{{ task.text }}</span>
        <button @click="removeTask(task.id)" class="remove-btn">删除</button>
      </div>
    </div>
    
    <div class="task-stats">
      <span>总计: {{ totalTasks }} 个任务</span>
      <span>已完成: {{ completedTasks }} 个</span>
      <button @click="filter = 'all'">全部</button>
      <button @click="filter = 'active'">未完成</button>
      <button @click="filter = 'completed'">已完成</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const newTask = ref('')
const tasks = ref([])
const filter = ref('all')

// 添加新任务
const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      text: newTask.value.trim(),
      completed: false
    })
    newTask.value = ''
    saveToLocalStorage()
  }
}

// 删除任务
const removeTask = (id) => {
  tasks.value = tasks.value.filter(task => task.id !== id)
  saveToLocalStorage()
}

// 计算属性
const totalTasks = computed(() => tasks.value.length)
const completedTasks = computed(() => 
  tasks.value.filter(task => task.completed).length
)

const filteredTasks = computed(() => {
  switch (filter.value) {
    case 'active':
      return tasks.value.filter(task => !task.completed)
    case 'completed':
      return tasks.value.filter(task => task.completed)
    default:
      return tasks.value
  }
})

// 本地存储
const saveToLocalStorage = () => {
  localStorage.setItem('vue-tasks', JSON.stringify(tasks.value))
}

const loadFromLocalStorage = () => {
  const saved = localStorage.getItem('vue-tasks')
  if (saved) {
    tasks.value = JSON.parse(saved)
  }
}

// 生命周期
onMounted(() => {
  loadFromLocalStorage()
})
</script>

<style scoped>
.task-manager {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.task-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

.add-btn {
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: #888;
}

.task-checkbox {
  margin-right: 8px;
}

.task-text {
  flex: 1;
}

.remove-btn {
  padding: 4px 8px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-stats {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

这个例子展示了 <script setup> 在实际项目中的强大能力，代码结构清晰，逻辑组织得当。

常见问题解答

Q: 从 Options API 迁移到 <script setup> 难吗？ A: 其实不难！大部分概念都是相通的，只是写法更简洁了。建议先从简单的组件开始尝试。

Q: <script setup> 对 TypeScript 支持怎么样？ A: 支持非常好！类型推断更加准确，写起来特别舒服。

Q: 还能和普通的 <script> 混用吗？ A: 可以的，但通常不建议。除非你有特殊的模块导出需求。

Q: 现有的 Vue2 项目能直接用吗？ A: 需要升级到 Vue3，但升级过程比想象中简单，官方提供了详细的迁移指南。

最佳实践推荐

根据我的经验，这些实践能让你的代码质量更高：

按逻辑组织代码，而不是按功能类型。把相关的数据、方法、计算属性放在一起。合理使用组合式函数抽离可复用逻辑。使用 TypeScript 获得更好的开发体验。保持组件的单一职责，不要写太复杂的组件。

还在为 Vue 组件间的类型安全头疼吗？每次传参都像在玩“猜猜我是谁”，运行时错误频出，调试起来让人抓狂？别担心，今天我要带你彻底掌握 Vue 3 中的 defineProps 和 defineEmits，这对 TypeScript 的完美搭档将彻底改变你的开发体验。

读完本文，你将获得一套完整的类型安全组件通信方案，从基础用法到高级技巧，再到实战中的最佳实践。更重要的是，你会发现自己写出的代码更加健壮、可维护，再也不用担心那些烦人的类型错误了。

为什么需要 defineProps 和 defineEmits？

在 Vue 2 时代，我们在组件中定义 props 和 emits 时，类型检查往往不够完善。虽然可以用 PropTypes，但和 TypeScript 的配合总是差那么点意思。很多时候，我们只能在运行时才发现传递了错误类型的数据，这时候已经为时已晚。

想象一下这样的场景：你写了一个按钮组件，期望接收一个 size 属性，只能是 'small'、'medium' 或 'large' 中的一个。但在使用时，同事传了个 'big'，TypeScript 编译时没报错，直到用户点击时才发现样式不对劲。这种问题在大型项目中尤其致命。

Vue 3 的 Composition API 与 TypeScript 的深度集成解决了这个问题。defineProps 和 defineEmits 这两个编译器宏，让组件的输入输出都有了完整的类型推导和检查。

defineProps：让组件输入类型安全

defineProps 用于定义组件的 props，它最大的优势就是与 TypeScript 的无缝集成。我们来看几种不同的用法。

基础用法很简单，但功能强大：

// 定义一个按钮组件
// 使用类型字面量定义 props
const props = defineProps<{
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}>()

// 在模板中直接使用
// 现在有了完整的类型提示和检查

这种写法的好处是，当你使用这个组件时，TypeScript 会严格检查传入的 size 值。如果你试图传递 'big'，编译器会立即报错，而不是等到运行时。

但有时候我们需要给 props 设置默认值，这时候可以这样写：

// 使用 withDefaults 辅助函数设置默认值
interface ButtonProps {
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<ButtonProps>(), {
  size: 'medium',
  disabled: false,
  loading: false
})

withDefaults 帮我们处理了默认值，同时保持了类型的完整性。这样即使父组件没有传递这些 props，子组件也能正常工作。

还有一种情况，我们需要混合使用运行时声明和类型声明：

// 运行时声明与类型声明结合
const props = defineProps({
  // 运行时声明
  label: {
    type: String,
    required: true
  },
  // 类型声明
  count: {
    type: Number,
    default: 0
  }
})

// 定义类型
interface Props {
  label: string
  count?: number
}

// 这种写法在某些复杂场景下很有用

这种混合写法在处理一些动态 prop 时特别有用，比如需要根据某些条件决定 prop 的类型。

defineEmits：组件输出的类型守卫

defineEmits 用于定义组件发出的事件，同样提供了完整的类型支持。这确保了我们在触发事件时传递正确的数据，也让使用者知道应该如何处理这些事件。

先看一个基础示例：

// 定义表单组件的事件
// 使用类型字面量定义 emits
const emit = defineEmits<{
  // submit 事件携带一个表单数据对象
  submit: [formData: FormData]
  // cancel 事件不携带数据
  cancel: []
  // input 事件携带字符串值
  input: [value: string]
}>()

// 在方法中触发事件
function handleSubmit() {
  const formData = gatherFormData()
  // TypeScript 会检查 formData 是否符合 FormData 类型
  emit('submit', formData)
}

function handleCancel() {
  // 不传递参数，符合类型定义
  emit('cancel')
}

这种写法的优势在于，当你在组件内调用 emit 时，TypeScript 会严格检查参数的类型和数量。如果你试图 emit('submit') 而不传递 formData，或者传递错误类型的参数，编译器会立即提醒你。

对于更复杂的场景，我们可以使用接口来定义事件：

// 使用接口定义事件类型
interface FormEvents {
  submit: (data: FormData) => void
  cancel: () => void
  validate: (isValid: boolean, errors: string[]) => void
}

const emit = defineEmits<FormEvents>()

// 在验证方法中触发复杂事件
function performValidation() {
  const isValid = validateForm()
  const errors = getValidationErrors()
  
  // TypeScript 确保我们传递正确的参数类型
  emit('validate', isValid, errors)
}

这种接口方式的定义让代码更加清晰，特别是当事件类型比较复杂时。你可以把所有的事件定义放在一个地方，便于维护和理解。

实战技巧：高级用法与最佳实践

在实际项目中，我们经常会遇到一些复杂场景，这时候就需要一些高级技巧来应对。

一个常见的需求是，我们需要基于已有的 props 类型来定义事件。比如在一个可搜索的表格组件中：

// 定义表格组件的 props 和 emits
interface TableProps {
  data: any[]
  columns: Column[]
  searchable?: boolean
  pagination?: boolean
}

const props = defineProps<TableProps>()

// 事件定义基于 props 的某些特性
const emit = defineEmits<{
  // 只有当 searchable 为 true 时才会有 search 事件
  search: [query: string]
  // 只有当 pagination 为 true 时才会有 pageChange 事件
  pageChange: [page: number]
  // 始终存在的选择事件
  rowSelect: [row: any]
}>()

// 在搜索方法中条件性触发事件
function handleSearch(query: string) {
  if (props.searchable) {
    // TypeScript 知道这个事件是有效的
    emit('search', query)
  }
}

另一个有用的技巧是泛型组件的定义。当我们想要创建可重用的通用组件时：

// 定义一个通用的列表组件
interface ListProps<T> {
  items: T[]
  keyField: keyof T
  renderItem?: (item: T) => any
}

// 使用泛型定义 props
function defineListProps<T>() {
  return defineProps<ListProps<T>>()
}

// 在具体组件中使用
interface User {
  id: number
  name: string
  email: string
}

// 为 User 类型特化组件
const props = defineListProps<User>()

这种泛型组件的方式在组件库开发中特别有用，它提供了极大的灵活性，同时保持了类型安全。

在处理异步操作时，我们通常需要定义加载状态和错误处理：

// 异步操作组件的完整类型定义
interface AsyncProps {
  data?: any
  loading?: boolean
  error?: string | null
}

interface AsyncEmits {
  retry: []
  reload: [force?: boolean]
  success: [data: any]
}

const props = defineProps<AsyncProps>()
const emit = defineEmits<AsyncEmits>()

// 在异步操作完成时触发事件
async function fetchData() {
  try {
    const result = await api.fetch()
    emit('success', result)
  } catch (error) {
    // 错误处理
  }
}

常见陷阱与解决方案

虽然 defineProps 和 defineEmits 很强大，但在使用过程中还是有一些需要注意的地方。

一个常见的错误是试图在运行时访问类型信息：

// 错误的做法：试图在运行时使用类型
const props = defineProps<{
  count: number
}>()

// 这在运行时是 undefined，因为类型信息在编译时就被移除了
console.log(props.count.type) // undefined

// 正确的做法：使用运行时声明
const props = defineProps({
  count: {
    type: Number,
    required: true
  }
})

另一个陷阱是关于可选参数的处理：

// 定义带有可选参数的事件
const emit = defineEmits<{
  // 第二个参数是可选的
  search: [query: string, options?: SearchOptions]
}>()

// 使用时要注意参数顺序
function handleSearch(query: string) {
  // 可以只传递必填参数
  emit('search', query)
}

function handleAdvancedSearch(query: string, options: SearchOptions) {
  // 也可以传递所有参数
  emit('search', query, options)
}

在处理复杂的嵌套对象时，类型定义可能会变得冗长：

// 使用类型别名简化复杂类型
type UserProfile = {
  personal: {
    name: string
    age: number
  }
  preferences: {
    theme: 'light' | 'dark'
    language: string
  }
}

const props = defineProps<{
  profile: UserProfile
}>()

// 这样既保持了类型安全，又让代码更清晰

与其它 Composition API 的配合

defineProps 和 defineEmits 可以很好地与 Vue 3 的其它 Composition API 配合使用，创造出强大的组合逻辑。

比如与 provide/inject 的配合：

// 父组件提供数据
const props = defineProps<{
  theme: 'light' | 'dark'
  locale: string
}>()

// 基于 props 提供全局配置
provide('appConfig', {
  theme: props.theme,
  locale: props.locale
})

// 子组件注入并使用
const config = inject('appConfig')

与 watch 和 computed 的配合：

const props = defineProps<{
  items: any[]
  filter: string
}>()

const emit = defineEmits<{
  filtered: [results: any[]]
}>()

// 监听 props 变化并触发事件
watch(() => props.filter, (newFilter) => {
  const filtered = filterItems(props.items, newFilter)
  emit('filtered', filtered)
})

// 基于 props 计算衍生数据
const sortedItems = computed(() => {
  return props.items.sort(sortFunction)
})

性能优化与最佳实践

虽然类型安全很重要，但我们也要注意性能影响。以下是一些优化建议：

对于大型对象，考虑使用浅层响应式：

const props = defineProps<{
  // 对于大型配置对象，使用 shallowRef 避免不必要的响应式开销
  config: AppConfig
  // 对于频繁变化的数据，保持深度响应式
  items: any[]
}>()

合理使用 PropType 进行复杂类型验证：

import type { PropType } from 'vue'

const props = defineProps({
  // 使用 PropType 进行运行时类型验证
  complexData: {
    type: Object as PropType<ComplexData>,
    required: true,
    validator: (value: ComplexData) => {
      return validateComplexData(value)
    }
  }
})

总结

defineProps 和 defineEmits 是 Vue 3 与 TypeScript 完美结合的代表作。它们不仅提供了编译时的类型安全，还大大提升了开发体验。通过本文的学习，你应该能够在组件中正确定义类型安全的 props 和 emits，充分利用 TypeScript 的类型推导能力，处理各种复杂场景下的类型需求，避免常见的陷阱和错误。