Vue 实战教程：构建一个完整的待办事项应用（附源码解析）

快速概述

待办事项应用是 Vue 入门最经典的实战项目，它覆盖了 Vue 的核心机制：响应式数据绑定、组件化开发、事件处理与列表渲染。适用场景包括学习 Vue 基础、练习组件拆分以及作为个人工具使用。前置环境要求：安装 Node.js（建议 16+），具备 HTML、CSS、JavaScript 基础，并了解 npm 或 yarn 的基本用法。

核心概念与原理

Vue 是一个渐进式 JavaScript 框架，其核心是响应式系统——当数据变化时，视图自动更新。在 Vue 3 中，我们使用 ref 和 reactive 创建响应式数据，通过 v-for 渲染列表，v-model 实现双向绑定，@click 监听事件。组件是 Vue 应用的基本单元，每个 .vue 文件包含模板（template）、脚本（script）和样式（style），这种单文件组件（SFC）结构让代码更清晰、可维护。

实战步骤与代码

1. 初始化项目

使用 Vite 创建 Vue 3 项目：

npm create vue@latest todo-app
cd todo-app
npm install
npm run dev

此命令会生成一个包含基本结构的项目，我们将在其基础上开发。

2. 创建 Todo 组件

在 src/components 下新建 TodoItem.vue，负责展示单个待办事项：

<template>
  <li>
    <input type="checkbox" :checked="todo.done" @change="toggle" />
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
    <button @click="remove">删除</button>
  </li>
</template>
<script setup> import { defineProps, defineEmits } from 'vue'
const props = defineProps({ todo: { type: Object, required: true } })
const emit = defineEmits(['toggle', 'remove'])
function toggle() { emit('toggle', props.todo.id) }
function remove() { emit('remove', props.todo.id) } </script>
<style scoped> .done { text-decoration: line-through; } </style>

这里使用了 defineProps 和 defineEmits 定义组件的输入与输出，实现了父子组件通信。

3. 主应用组件

修改 App.vue，管理待办列表的状态：

<template>
  <div>
    <h1>待办事项</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新任务" />
    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle="toggleTodo"
        @remove="removeTodo"
      />
    </ul>
  </div>
</template>
<script setup> import { ref } from 'vue' import TodoItem from './components/TodoItem.vue'
const newTodo = ref('') const todos = ref([ { id: 1, text: '学习 Vue 基础', done: false } ])
function addTodo() { if (newTodo.value.trim()) { todos.value.push({ id: Date.now(), text: newTodo.value.trim(), done: false }) newTodo.value = '' } }
function toggleTodo(id) { const todo = todos.value.find(t => t.id === id) if (todo) todo.done = !todo.done }
function removeTodo(id) { todos.value = todos.value.filter(t => t.id !== id) } </script>

这里使用 ref 创建响应式数组，v-for 渲染列表，@keyup.enter 监听回车键添加任务。

4. 运行与测试

保存文件后，浏览器会自动刷新。尝试添加、勾选、删除任务，验证功能是否正常。

常见坑点与优化

• 忘记 .value：在 script 中访问 ref 创建的变量必须使用 .value，模板中则自动解包。
• 列表 key 缺失：使用 v-for 时务必绑定唯一的 :key，否则可能导致渲染异常。
• 直接修改 props：props 是只读的，应该通过事件通知父组件修改数据。
• 性能优化：对于长列表，可以使用 v-memo 或 shallowRef 减少不必要的渲染；将大型组件拆分为更小的子组件，利用 Vue 的响应式追踪提高更新效率。

遵循上述步骤，你已成功构建一个完整的待办事项应用。继续深入学习 Vue 的组件通信、路由和状态管理，将能开发更复杂的应用。