LESSON-20 · TOPIC 01
能在 JavaScript 以 count.value 讀寫 ref，同時在 template 直接使用 count，並證明兩處指向同一反應式值。
能在 JavaScript 以 count.value 讀寫 ref，同時在 template 直接使用 count，並證明兩處指向同一反應式值。
漏寫 .value 會改到 ref 容器以外的東西或讓計算失效；template 又多寫 .value 會造成錯誤心智模型。
要修改的檔案：files/starter/main.js
定位：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。｜依 starter-1 定位，只修改「JavaScript .value 與 template 自動解包」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
按鈕事件執行 count++ 後畫面沒更新，Console 顯示 count 是物件。
起始狀態：count ref=1，template 顯示 1。
before=1、after=2、templateText=2、isRef=true。
驗收證據：isRef=true、before=1、after=2、templateText=2
setup 中保存可替換的單一狀態，並讓 template 依該狀態更新。
常見混淆：template 自動解包不代表所有巢狀 ref 在任意 JavaScript 物件裡都自動解包。
這段程式是理解起點，不是要你直接跳過 Starter。
JavaScript 要打開 ref 盒子取 .value；Vue template 會替你打開，所以直接寫 count。
正式說法：ref() 回傳含 reactive `.value` accessor 的 Ref；template expression 對頂層 ref 執行自動解包。
const count=Vue.ref(1); count.value++; template 使用 {{ count }}。每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/main.js 定位：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。」目前的缺口。
證據：保存 files/starter/main.js 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/main.js，且定位到 先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。。
檔案：files/starter/main.js 定位：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。
要做：掛載 count，於 JavaScript 以 .value 增加一次，再讀 template 的文字。
預期：before=1、after=2、templateText=2、isRef=true。
證據：isRef=true、before=1、after=2、templateText=2
卡住先查：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。
檔案：files/starter/main.js 定位：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：before=1、after=2、templateText=2、isRef=true。
證據：isRef=true、before=1、after=2、templateText=2
卡住先查：先用 Vue.isRef(count) 與 count.value 證明目前拿到的是 ref。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
setup JavaScript 與 template 的取值規則不同。
JavaScript 改 count.value；template 保留 {{ count }}。
完整解答與原因：count 是 Ref，所以 setup 內用 count.value += 1；template 對頂層 ref 自動解包，nextTick 後文字應由 1 變 2。