Vue3 + TypeScript 核心开发技巧：从响应式到组件通信
一、组合式 API 高效开发实践
Vue3 的组合式 API 是前端工程化开发的核心，相比 Options API，它能更灵活地组织代码逻辑，结合 TypeScript 还能实现强类型约束，提升代码可维护性。
- 响应式数据与计算属性响应式数据是 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) || [] })- 生命周期与异步逻辑组合式 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 类型规范
- 全局接口定义在
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 } }- 泛型请求封装利用泛型实现通用请求函数，适配不同返回类型：
typescript
const fetchList = async <T>(params: any): Promise<API.PageResult<T>> => { const res = await request.get('/api/list', { params }) return res.data }