選一個 topic
從第一張卡開始，先閱讀任務情境與預期畫面。
LESSON-20 · SELF-PACED PRACTICE
Vue 反應式資料與清單渲染
把「Vue 反應式資料與清單渲染」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
4個獨立主題3個練習階段1個整合挑戰
看見缺口 → 修改一小段 → 重新載入驗收
每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。
先知道今天要做什麼
不要從長篇名詞開始；先從第一個可完成的小任務開始。
修改自己的檔案
打開 Starter 的實作檔，依 Step 逐步修改，不靠按鈕代做。
用證據驗收
重新整理頁面，對照畫面、DOM、Computed、Console 或文件證據。
4 個獨立主題
每張卡只練一個責任；完成後再進入下一張。
JavaScript .value 與 template 自動解包
能在 JavaScript 以 count.value 讀寫 ref，同時在 template 直接使用 count，並證明兩處指向同一反應式值。
要修改：files/starter/main.js
ref 與 reactive 選擇
能以 ref 管會整體替換的搜尋字，以 reactive 管逐欄修改的表單物件，並用 isRef/isReactive 驗證。
要修改：files/starter/main.js
computed 與 method
能用 computed 表示可快取的衍生值，用一般函式表達每次呼叫的動作，並比較執行次數。
要修改：files/starter/main.js
v-if／v-show 與穩定 key
能觀察 v-if 移除節點、v-show 保留節點但改 display，並以資料 id 讓重排後輸入值跟隨正確項目。
要修改：files/starter/index.html
最後整合挑戰
把已完成的責任轉回本章完整作品，不把整合步驟冒充成單項教學。
在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
完成以 ref/reactive 管狀態、computed 過濾且條件／清單身份穩定的服務列表。
第一個建議動作
如果你現在只想知道下一步，先做這件事。