4.3.5 阶段性成果检查 转载

来源:https://github.com/datawhalechina/vibe-vibe

04-practice-0-to-1_4.3-core-features_4.3.5-checkpoint.png

本步目标:确认第二轮所有功能正常,准备进入下一轮

第二轮完成检查清单

在进入数据存储(4.4)之前,请确认以下功能都能正常工作:

添加任务

输入内容后点击添加,任务出现在列表中
添加后输入框自动清空
空输入不会添加空任务
可以连续添加多个任务

删除任务

点击删除按钮,对应任务消失
删除一个任务不影响其他任务
新添加的任务也能正常删除

标记完成

点击完成按钮,任务有视觉变化(删除线、变灰)
再次点击可以取消完成状态
完成/取消操作可以反复进行
已完成的任务仍然可以删除

整体检查

按 F12 打开控制台,没有红色报错信息
三个功能可以配合使用,互不影响

🎉 第二轮完成!

恭喜你!经过这一轮,你的待办清单已经从"静态页面"变成了"可交互应用"。

你完成了什么

功能 第一轮结束时 第二轮结束时
添加任务 ❌ 点击无反应 ✅ 能正常添加
删除任务 ❌ 点击无反应 ✅ 能正常删除
标记完成 ❌ 点击无反应 ✅ 能正常切换

回顾:本轮用到了什么

来源 你用到的内容
第二章 2.3 节 MVP 功能定义(P0 功能清单)
第三章 3.2 节 S.C.F. 精简框架写 Prompt
第三章 3.5 节 迭代对话追问技巧
第四章 4.2 节 在静态页面基础上添加功能

这就是 Vibe Coding 的完整工作流:想清楚 → 说明白 → 让 AI 做 → 调整优化

当前状态总结

功能 状态 备注
页面显示 ✅ 正常
添加任务 ✅ 可用
删除任务 ✅ 可用
标记完成 ✅ 可用
刷新后数据还在 ❌ 数据会丢失 下一轮解决

发现问题了吗?

现在试试:刷新一下页面(按 F5 或 Ctrl+R)。

你会发现:所有任务都消失了。

这是正常的。目前我们的待办清单只"活"在浏览器的内存里,就像在白板上写字——关掉白板,字就没了。

下一轮,我们要解决这个问题:让数据能够保存下来,即使刷新页面、关闭浏览器,你的任务列表也不会丢失。

⚠️ 💡 遇到问题?

如果某个功能不正常,先回到对应的小节查看"常见问题排查"。

如果是看不懂的报错,可以先跳到 4.5 Debug 实战 学习如何让 AI 帮你修复。

也可以继续往下学,遇到问题随时回来解决。

下一步预告

第三轮是"存储层"——让你的待办清单具备"记忆"能力:

  • 关闭浏览器,数据不丢失
  • 第二天打开,昨天的任务还在
  • 就像真正的应用一样

准备好了吗?

4.4 第三轮:让数据活起来

最后编辑:Alex 2026-03-05 11:39:50