Vue3 + TypeScript 核心开发技巧：从响应式到组件通信

一、组合式 API 高效开发实践Vue3 的组合式 API 是前端工程化开发的核心相比 Options API它能更灵活地组织代码逻辑结合 TypeScript 还能实现强类型约束提升代码可维护性。响应式数据与计算属性响应式数据是 Vue3 的基础合理使用ref和computed能避免数据更新导致的渲染异常typescript// 基础响应式定义带类型约束 const loading refboolean(false) const dataList refAPI.DataItem[]([]) // 计算属性过滤空值保护 const filteredData computed(() { return dataList.value?.filter(item item.status 1) || [] })生命周期与异步逻辑组合式 API 的生命周期钩子更贴合业务逻辑编写习惯异步请求建议结合onMounted使用并做好异常处理typescriptonMounted(() { 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 :datalistData updatehandleUpdate / !-- 子组件 -- script setup langts // 接收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中统一管理业务类型提升代码复用性typescriptdeclare namespace API { // 基础数据类型 interface DataItem { id: number name: string status: number [key: string]: any } // 分页返回类型泛型 interface PageResultT { records: T[] total: number current: number size: number } }泛型请求封装利用泛型实现通用请求函数适配不同返回类型typescriptconst fetchList async T(params: any): PromiseAPI.PageResultT { const res await request.get(/api/list, { params }) return res.data }