Vue3+TS重构TodoList实战指南

Vue3组合式API+TypeScript重构TodoList项目实战

随着前端技术的快速发展，Vue3的组合式API与TypeScript的结合已成为现代前端开发的主流选择。本文以TodoList项目的重构实践为例，探讨这一技术组合如何提升代码质量与开发效率。

项目背景与技术选型

TodoList作为前端入门经典项目，其简单特性使其成为验证新技术的理想载体。本次重构采用Vue3.4+TypeScript5.0技术栈，核心优势在于：组合式API解决了Options API的逻辑碎片化问题，而TypeScript则为项目提供了类型安全保障。通过TypeScript的接口定义，所有组件props、事件、响应式数据均具有明确的类型约束，有效减少了运行时错误。

重构实践要点

• 响应式数据管理优化
  使用ref/reactive重构Todo数据结构，通过interface明确定义TodoItem类型。每个Todo对象包含id、title、completed三个属性，其中id使用Symbol类型确保唯一性，避免传统时间戳可能产生的冲突。响应式数据集中式管理，使数据流向更加清晰。
• 逻辑复用与组件拆分
  将过滤逻辑抽离为composable函数useFilterTodos，接收todos和filterStatus作为参数，返回过滤后的结果列表。这种设计使业务逻辑与UI渲染完全解耦，单个文件行数控制在50行以内，符合单一职责原则。Filter组件通过provide/inject获取全局过滤状态，实现跨组件通信。
• 类型安全的组件通信

  父子组件通信采用emits选项明确事件类型定义，如add: (title: string) => void。自定义事件处理函数必须严格匹配类型签名，否则TypeScript编译器将报错。这种机制在开发阶段就能捕获80%以上的通信错误，替代了传统的运行时校验。

• 状态持久化方案
  结合watchEffect和localStorage实现数据持久化，通过泛型接口StorageData定义存储数据结构。使用try-catch包裹JSON解析操作，避免因数据损坏导致应用崩溃。每次数据变更自动触发同步，同时提供手动导入导出功能，增强数据可移植性。