1小时用$emit打造TodoList原型

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   快速开发一个TodoList应用原型，要求：1)使用Vue3 Composition API；2)通过$emit实现添加新任务、切换完成状态、删除任务功能；3)包含本地存储功能；4)实现简单的过滤功能（全部/已完成/未完成）。所有功能要在单个文件组件中完成，适合快速演示和迭代。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在尝试用Vue3快速实现一个功能完整的TodoList应用原型，发现用Composition API结合$emit可以非常高效地完成这个需求。整个过程大概花了一小时左右，下面分享下具体实现思路和关键点。

1. 项目结构与基础设置

首先创建一个Vue3单文件组件，包含template、script和style三个部分。使用Composition API的setup函数来组织逻辑代码，这样可以让代码更清晰，也便于后续维护。

2. 数据状态管理

在setup函数中，使用ref和reactive来定义响应式数据：

• 使用ref定义一个tasks数组来存储所有任务
• 使用ref定义一个filter字符串来存储当前过滤条件
• 使用reactive定义一个newTask对象来临时存储新增任务的内容

3. 核心功能实现

3.1 添加新任务

1. 在模板中使用v-model绑定newTask对象
2. 创建一个addTask方法，通过$emit触发添加事件
3. 在父组件中监听这个事件，将新任务push到tasks数组中
4. 同时清空输入框

3.2 切换任务状态

1. 为每个任务项添加复选框
2. 通过$emit触发toggle事件，传递任务id
3. 在父组件中找到对应任务，切换其完成状态

3.3 删除任务

1. 为每个任务项添加删除按钮
2. 通过$emit触发delete事件，传递任务id
3. 在父组件中过滤掉对应id的任务

4. 本地存储实现

使用localStorage来持久化任务数据：

1. 在组件挂载时从localStorage读取已有任务
2. 使用watchEffect监听tasks变化，自动保存到localStorage
3. 注意JSON的序列化和反序列化处理

5. 过滤功能

实现一个computed属性filteredTasks：

1. 根据filter值('all'/'active'/'completed')返回不同的任务列表
2. 在模板中添加三个按钮来切换过滤条件
3. 使用动态class来高亮当前选中的过滤条件

6. 样式与交互优化

1. 添加基本的CSS样式美化界面
2. 实现任务完成时的删除线效果
3. 为空状态添加提示信息
4. 为交互添加简单的过渡动画

经验总结

通过这个项目，我发现Vue3的Composition API配合$emit可以非常灵活地构建组件间通信。相比Options API，Composition API的代码组织更加清晰，逻辑复用也更方便。

$emit的用法需要注意几点：

• 事件命名建议使用kebab-case
• 传递的数据要保持简单，避免传递复杂对象
• 在父组件中合理处理事件参数

这个小项目虽然简单，但包含了Vue开发中的很多常见模式，非常适合用来练习Vue3的新特性。

如果你想快速体验这个项目，可以访问InsCode(快马)平台，无需复杂配置就能直接运行和修改代码。平台内置的编辑器体验很流畅，一键部署功能也让分享变得特别方便。

实际操作时我发现，即使没有Vue基础，跟着平台提供的示例也能很快理解核心概念。这种边做边学的方式效果比单纯看教程要好很多。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   快速开发一个TodoList应用原型，要求：1)使用Vue3 Composition API；2)通过$emit实现添加新任务、切换完成状态、删除任务功能；3)包含本地存储功能；4)实现简单的过滤功能（全部/已完成/未完成）。所有功能要在单个文件组件中完成，适合快速演示和迭代。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果