Vue 7 天复习计划

不查资料，写出 ref、reactive、v-model、v-if、v-for/key 各解决什么问题。画出“点击查看答案 → 修改状态 → 模板更新”的流程，并圈出两个最不确定的点。

先读本地“理解Vue的响应式思维”，再按需查看官方响应式基础、条件渲染与列表渲染。用 script setup 写计数器、答案显隐、带唯一 id 的列表；在 JS 和模板中分别使用 ref。不要通读整份指南。

在自己的练习目录使用现有 Vue 3 工程，或按官方快速上手创建项目并预选 Router、Pinia。准备至少 8 道题，每题包含唯一 id、title、topic、answer；用 v-for 渲染，点击题目显示答案。加上关键词输入和主题选择框，先绑定状态，筛选留到明天。

调换两题顺序，检查当前选中题仍由 id 定位；反复展开、关闭答案。录一段不超过 90 秒的说明，讲清数据结构、状态变化和 DOM 更新，再完成下面三道自测。

闭卷解释昨天两个薄弱点。列出题库、关键词、主题、收藏 id、可见题目、结果数量，分别标为原始状态或派生值；把日志或持久化另列为副作用。

阅读本地 Composition API 章节及官方 computed。实验一：解构普通 reactive 对象的数字属性后再修改原对象；用 toRef 或保留对象访问修复。实验二：临时用 console.count 观察 computed getter 的调用，不修改响应式状态，比较依赖不变和变化时的读取；实验三：用 watch 监听关键词记录日志。

在复习台加入 keyword、topic、favoriteIds 和 onlyFavorites。用 computed 得到 visibleQuestions 与数量；支持关键词和主题共同筛选、收藏与取消收藏、只看收藏及空结果提示。收藏只存 id，暂时不持久化；不要在 computed getter 内改状态。

检查空关键词、首尾空格、不同大小写、不存在的主题组合、收藏为空五种情况。完成三道自测，并用项目中各一个例子解释 ref、computed、watch 的职责。

把页面拆成 SearchBar、QuestionCard、QuestionDetail 三类组件。逐项写出每个组件接收哪些 props、向外发出什么事件，以及关键词、收藏和当前题目由谁持有。

读本地模板与通信章节，结合官方 Props、组件事件和组件 v-model。先手写 modelValue prop 与 update:modelValue 事件的输入组件；如果工程为 Vue 3.4+，再对照 defineModel 写法。为题目卡片加一个操作区插槽。

完成三个组件并声明 props、emits。QuestionCard 通过事件请求收藏和选中；QuestionDetail 只接收题目与显示状态；SearchBar 通过 v-model 同步关键词。复用第二天的筛选逻辑，并用插槽放置一个“查看答案”操作。

跑一遍“输入 → 筛选 → 收藏 → 查看答案 → 取消收藏”。检查组件接口是否只暴露必要信息，完成三道自测；用两分钟解释为什么没有把所有状态都交给子组件。

列出 /questions、/questions/:id 两个路由。决定题目 id 进入 URL，收藏 id 进入 Store，输入过程中的局部状态留在组件；写出刷新页面时哪些数据需要恢复。

阅读本地 Router/Pinia 章节及官方动态路由、定义 Store、State。用两个 id 验证同一详情组件可能复用；比较直接解构 Store 状态与 storeToRefs。查看 $subscribe 的持久化例子，决定只保存收藏 id 数组与版本号。

创建列表、详情路由及 RouterLink/RouterView。把 favoriteIds、toggleFavorite 和收藏数量迁入 Pinia；两页共用。启动时读取固定 localStorage key，捕获 JSON 解析错误并校验 id 数组；在应用初始化处注册一次订阅保存更新。无须加入登录、后端或完整持久化插件。

直接打开一个详情 URL，再使用浏览器后退；连续切换两个 id；写入损坏的本地存储后刷新。完成三道自测。若用 Web History，在笔记中注明静态服务器须回退入口；不准备服务器配置时可先用 Hash History。

在纸上排列“请求 A 发出 → 请求 B 发出 → B 返回 → A 返回”的时间线。为复习台写出正确的最终显示内容，以及 loading、error 在这段时间中应由哪次请求控制。

本地生命周期页主要是提纲，重点读官方生命周期、watch 的副作用清理与组合式函数。运行一个挂载时启动、卸载时停止的计时器。学习 watch 第三个参数 onCleanup；若用 onWatcherCleanup，注明它要求 Vue 3.5+ 且必须在 await 前的同步阶段注册。

建立异步 loadQuestion(id) 服务：从现有题库返回 Promise，可指定延迟并模拟失败。封装 useQuestion，用 watch 侦听详情 id 并立即加载，暴露 data/loading/error。通过清理回调的失效标记或请求序号保护成功、失败和 finally；若改用 fetch，可同时取消旧请求。加入重试和未找到题目的状态。

分别跑慢 A 快 B、失败后重试、请求中离开、非法 id 四组操作。检查 loading 是否能结束，是否把正常取消当成错误；回答三道自测，并记录这次修复的最小时间线。

为练习临时生成 2000 道唯一 id 的题目，在同一浏览器、数据量和构建模式下执行“打开列表 → 输入关键词 → 收藏一题”。记录可见卡片数、一次 Performance 轨迹和明显耗时步骤。

阅读官方性能优化中的代码分割、Props 稳定性与大型列表，以及 Router 路由懒加载。本地性能场景题用于借鉴回答结构，其中 React 示例和示例数字不直接套用。为当前瓶颈选一个方案，并写出其成本。

默认给结果列表加每页 50 题的分页，并在筛选变化时回到第一页；题卡只接收自身需要的稳定状态，避免把全局变化值传给每张卡。将详情路由组件改为动态 import。运行项目构建脚本，用生成的生产产物预览并检查详情入口。若基线指向别处，说明理由后优先修复那个瓶颈。

保持与基线相同的数据、设备和构建模式，重跑同一操作至少三次，记录耗时与 DOM 数量，不混比开发和生产模式。写下实际改善、没有改善的部分及一个后续方向，然后完成自测。

不看答案，分别用一句话解释响应式、computed/watch、组件通信、Router、Pinia、异步清理、性能测量。给每项标记“能解释 / 能写例子 / 仍有疑问”，选择两个最弱点。

每轮先用两分钟回答，再用五分钟写最小例子或画流程，最后三分钟自查。三轮分别讨论“筛选用 computed 还是 watch”“路由切题为什么会出现旧结果”“刷新后收藏如何恢复”。录音或保存逐字要点，先回答再翻资料。

按顺序检查关键词+主题筛选、空结果、收藏去重、详情收藏同步、刷新恢复、非法 id、慢 A 快 B、失败重试八项。挑两处真实失败或理解薄弱处修复，再用同样步骤回归；若八项均通过，就去掉笔记，现场重写一段筛选和一段竞态保护逻辑。

用“需求 → 状态与组件设计 → 一个困难 → 方案与取舍 → 实测结果”讲解复习台。整理 README：启动方式、路由与 Store 结构、关键边界、已知限制；从自测中选三题安排后续复习。只陈述亲手完成的功能和实际测量的数据。