Day 95 · 毕业博文 — 《原生 vs Vue 开发大屏的体会》：三周对照表的最终变现

今天把 Day 71 起维护的对照表（≥ 20 行）、Day 84 的退役报告、Day 85 的边界文档、Day 93 的优化数据，熔炼成一篇文章。这篇博文是第 3 个月最重的认知资产：它证明你不只是"用了 Vue"，而是理解了框架在替你做什么、代价是什么、边界在哪。发布后它同时是简历的附件、面试的预习材料、和未来自己的复习教材。

一、选题定位：为什么这篇值得写

1.1 它回答了一个高频争议题

“学前端要不要先学原生再学框架？”——你的项目恰好是同一需求、先后两版实现的对照实验，这在国内技术社区是稀缺素材（多数人只有单侧经验）。

1.2 它是三周工作的复利

对照表 20+ 行（Week 11-13 每日 10 分钟）→ 今天成文
退役报告 2 份（Day 84）                    → 第四章素材
边界文档 1 份（Day 85-91）                 → 第五章素材
优化数据表（Day 93）                       → 证据背书

没有这些日常积累，今天写不出来；有了它们，今天只需组织——这就是"每天 10 分钟对照表"习惯的兑现日。

二、文章骨架：五段式提纲

# 原生 TS vs Vue3：我把同一个工业大屏写了两遍

## 一、背景：为什么会做两遍
  - 两个月的学习路径（原生版 Day 41-70 → Vue 版 Day 71-94）
  - 同一需求、同一视觉、同一数据服务器——对照实验的控制变量
  - 一句话结论先行（见坑 2：结论前置）

## 二、变简单的部分：声明式的兑换率
  - 对照表精选 6-8 行（DOM 手艺 → 状态映射）
  - 一张对比截图（原生版 createTechCard 90 行 vs TechCard 组件 40 行）
  - 量化：屏 B 迁移时的"新写代码只剩 option 翻译层"（Day 77）

## 三、变复杂的部分：诚实的技术债
  - 构建层与工具链（Vite/依赖/版本心智负担）
  - 响应式纪律的隐性坑（解构/reactive 深代理/markRaw）
  - 调试成本转移（DOM 断点直观 → Devtools 学习曲线）

## 四、架构升级的部分：手写件退役记
  - ScreenRouter → Vue Router：URL 成为状态的完整收益清单
  - ScreenStore → Pinia："分发层消失，响应式即分发"
  - 退役报告的浓缩：手写一遍的不可替代价值

## 五、框架的边界：Canvas 与 Vue 的共存协议
  - 三问法则与数据裁决表（Day 85 精华）
  - markRaw / 存 id / 桥契约三条硬纪律
  - "框架不接管一切"——边界判断力的形成

## 六、给后来者的建议
  - 什么人适合"先原生后框架"（有 2-3 个月完整时间的自学者）
  - 什么人不适合（求职 deadline 紧张的）
  - 如果只学一版，学哪版（答案：框架版 + 理解原理即可，附本文对照表当教材）

三、写作要点：兑换率叙事法

3.1 核心方法论

每一段技术对比都用"兑换率"框架：不是"Vue 更好"，而是"用 X 兑换了 Y"：

❌ 平庸写法：用 Vue 之后代码变少了，开发变快了。
✅ 兑换率写法：用"手动同步的责任"兑换了"一层抽象的调试成本"——
   状态即真相的心智变简单，但 deep watch 的坑要重新学。
   我的量化：屏 B 的 DOM 手艺 90 行 → computed 翻译层 40 行（-55%），
   但多花了两天学 Devtools 与响应式陷阱。

3.2 三条写作纪律

每个论点带证据：行数对比、fps 数据、优化前后体积——Day 93/84 的表直接引用
代价与收益同行：只夸不贬的对比文没有公信力（Day 77 坑 4 的写作版）
结论前置：开头一段话给完全部结论，细节向后放——读者 30 秒决定读不读全文

四、参考样段：两个精选段落

样段 1（第二章候选）

原生版里，“KPI 数字滚动"是一套 DOM 工艺：拿到 update() 时机、管 rAF 循环、记得 cancel。Vue 版里它变成一个组合式函数 useRollingNumber——源值变化自动触发滚动，组件卸载自动清理。逻辑一行没少，责任转移了：调用方从"管时机"变成"管数据”。这是我对声明式最直观的一次顿悟：框架没有消灭复杂度，它把复杂度搬到了你只需要配置一次的地方。

样段 2（第五章候选）

拓扑页迁移时最纠结的问题是：120 个节点的坐标要不要响应式化？塞进 reactive，每帧深代理的开销会吃掉 60fps；完全不管，hover 详情又没法用 Vue 组件渲染。最后的方案是一张裁决表：每个数据过三问——需要被 Vue 读吗？每帧都变吗？变化触发重绘还是 UI？视口住画布，hover 存 id，数据走桥。这次设计让我明白：框架的能力边界不在文档里，在你对每条数据流向的追问里。

五、发布与传播

发布渠道（按优先级）：
  1. 个人博客（主阵地——README 和简历的链接指向这里）
  2. 掘金/知乎（技术社区——标题可改为更锋利的版本）
  3. 少量相关群/朋友圈（一次即可，勿刷屏）

发布后动作：
  □ 链接贴进 dashboard-vue/README.md 的"渊源"节
  □ 简历项目条目附博文链接（Day 96 的工作）
  □ 收藏评论区的问题（高赞问题 = 认知盲区 = 补课清单）

六、常见坑点

坑 1：写成教程

“Vue3 入门：ref 怎么用”——教程已经太多，你的稀缺性是对照实验。每写一段自问：这段内容网上有吗？有就删。

坑 2：流水账叙事

“第 11 周我学了 ref，第 12 周我学了 Pinia……”——学习顺序不是读者的关心点，结论与证据才是。时间线只出现在第一章背景里。

坑 3：贬低原生版抬轿

“原生 DOM 手艺过时了”——两版是递进关系不是对立关系；而且原生版是你自己的作品。贬它等于贬自己的两个月。

坑 4：数据裸奔

“性能差不多”——差多少？没有数字的对比是文学不是工程。Day 93 的表、Day 84 的 fps、Day 77 的行数——让数据替你说话。

坑 5：写完不改

初稿即终稿。至少过三遍：结构遍（逻辑通不通）、证据遍（每个论点有据吗）、删减遍（砍掉 20% 字数，通常都在变好）。

七、自测挑战

T1 · 成文（90 分钟）

按第二节提纲完成 ≥ 2000 字全文；兑换率叙事法贯穿；引用至少 3 组量化数据。

T2 · 三遍修改（40 分钟）

结构遍 + 证据遍 + 删减遍（目标砍 20%）；两个样段风格校准（自己最满意的两段与第四节对比）。

T3 · 发布与挂链（20 分钟）

发布到博客主阵地；README、NOTES.md 归档链接；30 秒电梯版结论写在文章顶部。

八、总结

环节	要点
定位	对照实验是稀缺素材——不做教程做判断
骨架	变简单/变复杂/架构升级/边界——四象限完整
叙事	兑换率框架：X 换 Y，代价同行
证据	行数/fps/体积——数据替你说话
传播	结论前置 + 主阵地发布 + README 挂链

博文成稿。明天把它变成求职武器：简历与面试弹药库。

【阶段2收官】day95-graduation-blog