张赫尔1. 先说说Easy-Vibe Task02到底是个什么任务
如果你关注过Easy-Vibe这个开源学习项目，应该知道它跟传统"看完视频敲一遍代码"的教程不太一样。整个系列被设计成一条任务链，每一关都会给你一个具体到能落地的产出物，而不是一章一章地讲语法。Task02是这条链上的第二个任务，核心要求一句话就能说清：用尽可能少的依赖，实现一个包含用户输入、状态持久化和动态渲染的轻量交互应用。
我在报名这个系列之前，其实已经会写一些零散的页面，但状态管理、数据存储、渲染更新这些概念一直停留在"听说过、没亲手串起来"的程度。Task02给的任务是做一个"心情记录"类的单页应用——用户能输入当前的心情文字，选择几个预设标签（比如专注、焦虑、平静），再用滑动条打个能量分，提交后内容出现在一条按日期分组的时间线里，刷新页面后数据不能丢。听起来不复杂，但它恰好把前端最基础的三块硬功夫全串起来了：DOM交互、本地存储、数据驱动渲染。
任务书还附了几条隐藏验收标准：不允许引入UI组件库、不允许使用任何前端框架、必须能在纯静态环境下运行。这意味着我没办法靠"装个Vue + Element Plus"绕过问题，所有交互和渲染逻辑都要自己写。对于想夯实基础的人来说，这其实是一件好事——框架帮你藏起来的那些细节，现在全暴露在你面前了。
这个任务适合谁来参考？我觉得是两类人：
- 已经学过HTML/CSS/JavaScript基础语法，但没完整做过一个交互应用的新手。
- 写过业务代码但习惯性依赖框架，想搞明白"离开框架之后，一个页面是怎么自己跑起来"的开发者。
下面这份笔记，是我从头到尾完成Task02的记录，包含了方案选型、每个核心模块的实现思路、本地调试一切正常但部署后翻车的三个典型问题。如果你也卡在这个任务上，或者正在带别人做类似的学习项目，应该能省下不少时间。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 任务拆解与方案选型：为什么我坚持用原生JavaScript加Vite
先说我最终的技术栈：原生 JavaScript + Vite + localStorage，没有用任何运行时依赖。任务本身不限制构建工具，Vite只是用来起开发服务器和做打包，它不参与业务逻辑。
2.1 选型前我问自己的三个问题
拿到任务后，我第一反应是"能不能上个框架"。但我给自己列了三个判断标准，逐个过了一遍：
- 任务的目的是什么？——不是产出最潮的工程，而是验证基础能力。用框架会把"数据如何驱动视图更新"这个核心环节藏起来。
- 运行环境允许什么？——要求纯静态部署，不能有后端。React/Vue 在这种场景下确实可行，但打包体积和依赖复杂度完全没必要。
- 我的时间成本花在哪更值？——如果把时间花在学框架API上，恰恰绕开了这个任务想考察的东西。学框架什么时候都能学，但"手动把状态和视图同步起来"的体感，只有自己写一遍才能建立。
所以理论上还有一个选项是"用 Svelte 或 Preact 这种轻量框架"，它们也够快、够轻。但我最终否掉了，因为任务的核心是让你理解原理，不是让你体验工具链。用原生JavaScript写出来的代码，每一条语句你都知道它在干什么，出了问题也更容易定位。
2.2 项目目录结构：能看懂的工程比能跑的工程更重要
初始化项目用的是Vite官方模板，但我在目录上做了一点调整，让结构直接对应任务的核心概念：
code复制easy-vibe-task02/
├── index.html
├── src/
│ ├── main.js # 入口文件，负责启动应用
│ ├── storage.js # localStorage封装层
│ ├── render.js # 渲染层，数据到DOM的映射
│ ├── form.js # 表单交互逻辑
│ ├── timeline.js # 时间线数据分组处理
│ └── style.css # 样式
└── package.json
每个文件只干一件事：storage.js 管数据读写，render.js 管视图更新，form.js 管用户输入。如果后面想给它加个后端同步，只需要替换 storage.js 的实现，其他文件几乎不用动。这种"各司其职"的组织方式，比把所有代码塞进一个 main.js 要更容易排查问题。
关于标题里的 Easy-Vibe，我后来在系列文档里读到，它其实是"Easy + Vibe"的组合，意思是"用轻松的方式建立对技术的感知"。这个理念很直接地影响了我的实现风格——不追求炫技，而是让每段代码都能被一眼看懂。
3. 核心功能实现：打卡表单、存储层与时间线渲染的完整链路
这个任务说到底是"输入到存储，存储到渲染"的数据流闭环。我把它拆成了三个模块来写，每个模块都从"它要解决什么问题"出发，而不是一上来就敲代码。
3.1 打卡表单：先把"用户产生了什么数据"定义清楚
表单是整个应用的入口。用户面对的是一个文本框、四个标签按钮（专注、放松