5.4.2 实现待办任务列表逻辑 -TypeScript和Vue从入门到精通(二)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(二)

### 5.4.2 实现待办任务列表逻辑

在开发Web应用时，待办任务列表（Todo List）是一个经典且实用的功能，它能够帮助用户管理和跟踪待完成的事项。在本章节中，我们将结合TypeScript和Vue.js的强大功能，从零开始实现一个功能完备的待办任务列表。我们将涵盖数据模型的定义、Vue组件的创建、任务的增删改查（CRUD）操作以及用户交互的响应处理。

#### 5.4.2.1 设计数据模型

首先，我们需要定义一个清晰的数据模型来表示待办任务。在TypeScript中，我们可以使用接口（Interface）或类型别名（Type Alias）来定义任务的数据结构。这里，我们选择使用接口，因为它提供了更严格的类型检查和更好的代码可读性。

```typescript
// src/types/Todo.ts
export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}
```

这个`Todo`接口定义了每个待办任务的基本属性：一个唯一的`id`（用于标识任务），一个`title`（任务的标题），以及一个`completed`布尔值（表示任务是否已完成）。

#### 5.4.2.2 创建Vue组件

接下来，我们需要创建一个Vue组件来展示和管理待办任务列表。这个组件将包括任务列表的显示、添加新任务的表单以及删除和切换任务完成状态的功能。

##### TodoList.vue

```vue
<template>
  <div>
    <h1>待办任务列表</h1>
    <input v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加新任务" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" :checked="todo.completed" @change="toggleCompletion(todo.id)" />
        {{ todo.title }}
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

export default defineComponent({
  name: 'TodoList',
  setup() {
    const todos = ref<Todo[]>([]);
    const newTodoTitle = ref('');

function toggleCompletion(id: number) {
      const todo = todos.value.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    }

function removeTodo(id: number) {
      todos.value = todos.value.filter(todo => todo.id !== id);
    }

return { todos, newTodoTitle, addTodo, toggleCompletion, removeTodo };
  },
});
</script>

在这个组件中，我们使用了Vue 3的Composition API来组织逻辑。`todos`是一个响应式引用，用于存储待办任务列表；`newTodoTitle`用于绑定输入框的值，并监听回车键来添加新任务；`addTodo`、`toggleCompletion`和`removeTodo`方法分别用于添加新任务、切换任务完成状态和删除任务。

#### 5.4.2.3 响应式更新与性能优化

在Vue中，由于使用了响应式系统，当`todos`数组发生变化时，视图会自动更新。然而，在处理大量数据或复杂逻辑时，我们需要注意性能问题。

- **避免不必要的渲染**：确保只有需要时才更新DOM。Vue的虚拟DOM和高效的更新算法已经为我们做了很多优化，但在某些情况下，如使用`v-for`渲染大量元素时，可以考虑使用`v-show`或`v-if`来控制元素的显示与隐藏，或者使用`key`来优化列表的渲染性能。
- **计算属性与侦听器**：对于复杂的逻辑，可以使用计算属性（Computed Properties）来缓存结果，避免重复计算。对于需要响应数据变化并执行异步操作或开销较大的操作时，可以使用侦听器（Watchers）。

#### 5.4.2.4 持久化存储

为了让待办任务列表在浏览器关闭后仍能保留，我们需要实现数据的持久化存储。这可以通过多种方式实现，如使用`localStorage`、`sessionStorage`、IndexedDB或WebSQL等。

以下是一个使用`localStorage`简单实现数据持久化的示例：

```typescript
// 在setup函数中
onMounted(() => {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos) as Todo[];
  }
});

onUnmounted(() => {
  localStorage.setItem('todos', JSON.stringify(todos.value));
});
```

注意，这里使用了Vue 3的`onMounted`和`onUnmounted`生命周期钩子来分别在组件挂载和卸载时执行数据加载和保存操作。

#### 5.4.2.5 总结

在本章节中，我们详细介绍了如何使用TypeScript和Vue.js实现一个功能完备的待办任务列表。从设计数据模型、创建Vue组件、处理用户交互到实现数据的持久化存储，我们逐步构建了一个既实用又符合现代Web开发标准的待办任务应用。通过这个过程，我们不仅加深了对TypeScript和Vue.js的理解，还学会了如何在实际项目中应用这些技术来解决问题。希望这个示例能够为你的项目开发提供有益的参考和启发。

该分类下的相关小册推荐：

VUE组件基础与实战

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(四)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(一)

Vue原理与源码解析

Vue3技术解密

Vue源码完全解析

TypeScript和Vue从入门到精通(三)

Vue.js从入门到精通(一)

移动端开发指南

vuejs组件实例与底层原理精讲