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）来定义任务的数据结构。这里，我们选择使用接口，因为它提供了更严格的类型检查和更好的代码可读性。

// 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

<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>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Todo } from '@/types/Todo';
export default defineComponent({
  name: 'TodoList',
  setup() {
    const todos = ref<Todo[]>([]);
    const newTodoTitle = ref('');
    function addTodo() {
      if (newTodoTitle.value.trim() !== '') {
        const newTodo: Todo = {
          id: todos.value.length + 1, // 简化的ID生成方式，实际开发中可能需要更复杂的逻辑
          title: newTodoTitle.value,
          completed: false,
        };
        todos.value.push(newTodo);
        newTodoTitle.value = ''; // 清空输入框
      }
    }
    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>
<style scoped>
/* 样式略 */
</style>

在这个组件中，我们使用了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简单实现数据持久化的示例：

// 在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的理解，还学会了如何在实际项目中应用这些技术来解决问题。希望这个示例能够为你的项目开发提供有益的参考和启发。