Vue3+TypeScript重构TodoList实战指南

Vue3组合式API+TypeScript重构经典TodoList应用实战

TodoList作为前端入门的经典案例，在Vue3和TypeScript的加持下焕发出新的活力。本文将通过实际操作，展示如何使用组合式API和TypeScript重构这个简单却极具代表性的应用。

为什么选择Vue3组合式API？

Vue3的组合式API（Composition API）相比Options API，在代码组织和逻辑复用方面有着天然优势。它将相关的状态和方法组织在一起，使得组件逻辑更加清晰，特别适合中大型项目。而TypeScript的类型检查则能在开发阶段就避免许多潜在的错误。

重构前的准备工作

首先创建一个新的Vue3项目，并配置TypeScript。使用Vite作为构建工具，可以快速搭建项目环境：

• 使用`npm create vue@latest`创建项目
• 选择TypeScript选项
• 安装必要的依赖

接下来，我们开始重构TodoList组件，将传统的Options API转换为组合式API的形式。

状态管理的革新

在组合式API中，我们使用`ref`和`reactive`来管理状态。对于TodoList应用，我们需要管理以下状态：

• 待办事项列表
• 新输入的内容
• 筛选条件

通过`ref`创建响应式数据，结合`computed`计算属性，可以轻松实现列表的筛选和排序。例如：

const todos = ref<TodoItem[]>([]);
const newTodo = ref(\'\');
const filter = ref(\'all\');

方法的重构与优化

组合式API允许我们将相关的方法组织在一起。例如，所有与待办事项操作相关的函数可以放在一个对象中：

const todoMethods = {
  addTodo() {
    if (newTodo.value.trim()) {
      todos.value.push({
        id: Date.now(),
        text: newTodo.value,
        completed: false
      });
      newTodo.value = \'\';
    }
  },
  toggleTodo(id: number) {
    const todo = todos.value.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }
};

类型定义的重要性

TypeScript的最大优势在于其类型系统。为TodoList应用定义明确的接口，可以提高代码的可维护性：

interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
}

生命周期钩子的使用

组合式API中的生命周期钩子以`on`开头，如`onMounted`、`onUpdated`等。这些钩子可以在setup函数中直接调用，使得逻辑更加集中。例如，在组件挂载时从本地存储加载数据：

onMounted(() => {
  const savedTodos = localStorage.getItem(\'todos\');
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos);
  }
});

总结

通过使用Vue3的组合式API和TypeScript，我们不仅重构了一个经典的TodoList应用，更重要的是体会到了现代前端开发的最佳实践。组合式API让代码组织更加合理，TypeScript提供了类型安全保障，两者结合能够显著提升开发效率和代码质量。这个简单的案例展示了Vue3生态的强大之处，也为构建更复杂的应用打下了坚实的基础。