一、组合式 API 高效开发实践

Vue3 的组合式 API 是前端工程化开发的核心，相比 Options API，它能更灵活地组织代码逻辑，结合 TypeScript 还能实现强类型约束，提升代码可维护性。

1. 响应式数据与计算属性响应式数据是 Vue3 的基础，合理使用ref和computed能避免数据更新导致的渲染异常：

typescript

// 基础响应式定义（带类型约束）
const loading = ref<boolean>(false)
const dataList = ref<API.DataItem[]>([])

// 计算属性：过滤+空值保护
const filteredData = computed(() => {
  return dataList.value?.filter(item => item.status === 1) || []
})

1. 生命周期与异步逻辑组合式 API 的生命周期钩子更贴合业务逻辑编写习惯，异步请求建议结合onMounted使用，并做好异常处理：

typescript

onMounted(() => {
  fetchData() // 页面挂载后加载数据
})

const fetchData = async () => {
  loading.value = true
  try {
    const res = await request.get('/api/list')
    dataList.value = res.records
  } catch (error) {
    message.error('数据加载失败：' + (error as Error).message)
  } finally {
    loading.value = false
  }
}

二、组件通信最佳实践

Vue3 中组件通信更强调类型安全，通过defineProps和defineEmits实现父子组件数据交互：

vue

<!-- 父组件 -->
<ChildComponent :data="listData" @update="handleUpdate" />

<!-- 子组件 -->
<script setup lang="ts">
// 接收Props（强类型约束）
const props = defineProps<{
  data: API.DataItem[]
}>()

// 定义触发事件
const emit = defineEmits<{
  update: [value: API.DataItem]
}>()

// 触发事件示例
const handleChange = (item: API.DataItem) => {
  emit('update', item)
}
</script>

三、TypeScript 类型规范

1. 全局接口定义在typings.d.ts中统一管理业务类型，提升代码复用性：

typescript

declare namespace API {
  // 基础数据类型
  interface DataItem {
    id: number
    name: string
    status: number
    [key: string]: any
  }
  
  // 分页返回类型（泛型）
  interface PageResult<T> {
    records: T[]
    total: number
    current: number
    size: number
  }
}

1. 泛型请求封装利用泛型实现通用请求函数，适配不同返回类型：

typescript

const fetchList = async <T>(params: any): Promise<API.PageResult<T>> => {
  const res = await request.get('/api/list', { params })
  return res.data
}