本頁只練什麼
能在 mount 前隱藏未編譯插值，mount 後移除 v-cloak，且 Vue 不可用時改顯示靜態 fallback。
慢網路或 CDN 失敗時若沒有兩條路徑，訪客會看到 {{ message }} 或永遠空白。
要修改的檔案：files/starter/index.html
定位：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。｜依 starter-3 定位，只修改「v-cloak 與 CDN 失敗 fallback」的責任。
LESSON-19 · TOPIC 03
v-cloak 與 CDN 失敗 fallback
能在 mount 前隱藏未編譯插值，mount 後移除 v-cloak，且 Vue 不可用時改顯示靜態 fallback。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
CDN 被阻擋後，聯絡區只剩空白，訪客不知道仍可打電話。
起始狀態：Vue 區有 v-cloak，fallback 預設 hidden。
完成後要看到
cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText 可理解。
驗收證據：cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText=互動功能暫時無法載入
何時會用到
使用 CDN global build、DOM template 可能先被看見，且頁面需要載入失敗的漸進式降級。
常見混淆：v-cloak 不是錯誤處理器；它只控制掛載前顯示，fallback 仍需自己的可見狀態。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
v-cloak 與 CDN 失敗 fallback v-cloak hydration guard and CDN failure fallback
Vue 還沒到時先把大括號遮住；真的載不到，就不要一直遮，改告訴訪客發生什麼事。
正式說法：v-cloak 會保留到 component instance mounted；獨立 loader guard 必須在 runtime 缺失時揭露非 Vue fallback。
[v-cloak]{display:none}；若 !window.Vue，移除 cloak 並顯示 fallback。三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/index.html定位：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/index.html定位：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。要做：跑成功 mount 與受控缺少 Vue 兩分支，分別檢查 cloak attribute 與 fallback.hidden。
預期：cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText 可理解。
證據：cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText=互動功能暫時無法載入
卡住先查：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/index.html定位：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText 可理解。
證據：cloakBefore=true、cloakRemoved=true、fallbackVisible=true、fallbackText=互動功能暫時無法載入
卡住先查：先分清楚成功 mount 與 runtime 缺失兩條證據，不把其中一條當全部。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
v-cloak 與 CDN 失敗 fallbackruntime fixture · read-only demo
本主題示範畫面：
{{ message }}
互動功能暫時無法載入
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
成功路徑看 v-cloak；失敗路徑看 fallback.hidden。
提示 2｜關鍵片段
正常 mount 後讀 hasAttribute('v-cloak')；再用受控 available=false 執行 fallback。
提示 3｜完整解答與原因
完整解答與原因：正常 Vue mount 會移除 v-cloak；若 loader 判定 Vue 不可用，就移除遮蔽並把靜態 fallback 顯示，避免大括號或永久空白。