Vue3 Composition API 实战入门：从零搭建一个待办事项应用

Vue3 的 Composition API 是一种强大的新特性，它允许你以更灵活的方式组织组件逻辑，避免传统 Options API 的局限性。本教程将从零开始，一步步教你使用 Vue3 Composition API 构建一个完整的待办事项应用（Todo App）。你将学习到如何管理状态、处理用户交互，并实现添加任务、删除任务和标记任务完成等功能。整个过程基于 Vue3 和 Composition API 的最佳实践，确保代码清晰易维护。

步骤 1: 创建 Vue3 项目

首先，确保你已安装 Node.js 和 npm（Node 包管理器）。如果未安装，请从 Node.js 官网 下载并安装。然后，使用 Vue CLI 创建一个新项目：

1. 打开终端或命令行工具。
2. 运行以下命令安装 Vue CLI（如果未安装）：

   npm install -g @vue/cli
   

3. 创建一个新项目，命名为 todo-app：

   vue create todo-app
   

   在创建过程中，选择 "Vue 3" 预设，并确保启用 Composition API。
4. 进入项目目录并启动开发服务器：

   cd todo-app
   npm run serve
   

   现在，访问 http://localhost:8080 在浏览器中查看默认 Vue 应用。我们将在此基础上构建待办事项应用。

步骤 2: 设置项目结构

在项目中，创建一个简单的组件结构：

• 打开 src/App.vue 文件，我们将在此实现主应用。
• 创建一个新组件文件 src/components/TodoItem.vue，用于显示单个任务。

步骤 3: 使用 Composition API 实现状态管理

Composition API 的核心是 setup() 函数，它允许你定义响应式状态和逻辑。我们将使用 ref 和 reactive 来管理任务列表。

在 src/App.vue 中，添加以下代码：

<template>
  <div class="app">
    <h1>我的待办事项</h1>
    <div>
      <input v-model="newTask" @keyup.enter="addTask" placeholder="输入新任务..." />
      <button @click="addTask">添加</button>
    </div>
    <ul>
      <TodoItem 
        v-for="(task, index) in tasks" 
        :key="index" 
        :task="task" 
        @delete="deleteTask(index)"
        @toggle="toggleTask(index)"
      />
    </ul>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import TodoItem from './components/TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  setup() {
    // 定义响应式状态：新任务输入框和任务列表
    const newTask = ref('');
    const tasks = reactive([]);

    // 添加新任务
    const addTask = () => {
      if (newTask.value.trim() !== '') {
        tasks.push({ text: newTask.value, completed: false });
        newTask.value = ''; // 清空输入框
      }
    };

    // 删除任务
    const deleteTask = (index) => {
      tasks.splice(index, 1);
    };

    // 标记任务完成/未完成
    const toggleTask = (index) => {
      tasks[index].completed = !tasks[index].completed;
    };

    // 返回状态和方法，供模板使用
    return {
      newTask,
      tasks,
      addTask,
      deleteTask,
      toggleTask
    };
  }
};
</script>

<style scoped>
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
input, button {
  padding: 8px;
  margin: 5px;
}
</style>

在 src/components/TodoItem.vue 中，添加以下代码：

<template>
  <li :class="{ completed: task.completed }">
    <span @click="$emit('toggle')">{{ task.text }}</span>
    <button @click="$emit('delete')">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    task: Object
  }
};
</script>

<style scoped>
li {
  list-style-type: none;
  margin: 5px 0;
  padding: 8px;
  background: #f9f9f9;
  border: 1px solid #ddd;
}
.completed {
  text-decoration: line-through;
  color: #888;
}
button {
  margin-left: 10px;
  background: #ff6b6b;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

步骤 4: 测试应用

1. 保存所有文件，开发服务器会自动重新加载。
2. 在浏览器中访问 http://localhost:8080。
3. 尝试添加新任务（例如“学习 Vue3”），点击任务可以标记为完成/未完成，点击“删除”按钮移除任务。
4. 功能说明：
   • 添加任务：在输入框中输入任务，按回车或点击“添加”按钮。
   • 标记完成：点击任务文本，它会切换完成状态（显示为删除线）。
   • 删除任务：点击“删除”按钮移除任务。

步骤 5: 扩展功能（可选）

为了更深入练习，你可以添加更多功能：

• 本地存储：使用 localStorage 保存任务列表，确保刷新页面后数据不丢失。在 setup() 中添加：

  import { onMounted } from 'vue';
  
  // 在 setup() 中添加
  onMounted(() => {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      tasks.value = JSON.parse(savedTasks);
    }
  });
  
  // 在添加或删除任务后保存
  const saveTasks = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  };
  // 在 addTask 和 deleteTask 中调用 saveTasks()
  

• 过滤任务：添加按钮来显示“所有”、“已完成”或“未完成”任务。
• 动画效果：使用 Vue 过渡（如 <transition>）让任务添加/删除更平滑。

总结

通过本教程，你已成功使用 Vue3 Composition API 构建了一个待办事项应用。关键收获包括：

• Composition API 优势：它通过 setup() 函数集中管理状态和逻辑，使代码更模块化和可复用。
• 响应式原理：使用 ref 和 reactive 处理简单值和对象，确保 UI 自动更新。
• 实际应用：从项目创建到组件交互，整个过程覆盖了前端开发的核心技能。

现在，你可以进一步探索 Vue3 的其他特性，如 Pinia（状态管理库）或 Vue Router（路由）。尝试修改代码，添加新功能，或重构为更复杂的应用。遇到问题时，参考 Vue 官方文档 获取更多帮助。祝你编码愉快！