LESSON-19 · TOPIC 02
能只讓 Vue 接管指定 mount container，並證明外部靜態 shell 不會因內部反應式更新而被改寫。
能只讓 Vue 接管指定 mount container，並證明外部靜態 shell 不會因內部反應式更新而被改寫。
商用多頁站常只在一小區使用 Vue；mount 範圍過大會把導覽、SEO 內容或既有事件一起交給 Vue。
要修改的檔案：files/starter/main.js
定位：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。｜依 starter-2 定位，只修改「mount boundary 與 DOM template 限制」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
為一個計數器把整個 body mount，結果靜態導覽內容被替換。
起始狀態：shell 與 #app 並列，#app 尚保留未編譯插值。
mounted=true、insideText 更新、outsideUnchanged=true、appCount=1。
驗收證據：appCount=1、mounted=true、insideText=Vue 已接管、outsideUnchanged=true
在既有 HTML shell 中建立 Vue island，或以 CDN DOM template 掛載小型互動區。
常見混淆：mount 不是 appendChild；它啟動 Vue renderer 並擁有容器內的更新生命週期。
這段程式是理解起點，不是要你直接跳過 Starter。
Vue 只接手貼了門牌的房間，不會重建房門外的靜態網站。
正式說法：Application.mount(container) 將根 component 渲染至該 container；in-DOM template 先受瀏覽器 HTML parser 正規化。
Vue.createApp({ data:()=>({message:'完成'}) }).mount('#app')。每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/main.js 定位：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。」目前的缺口。
證據：保存 files/starter/main.js 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/main.js，且定位到 先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。。
檔案：files/starter/main.js 定位：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。
要做：在唯一 mount container 掛載 Vue 並更新 message，確認外部 shell before/after 相同。
預期：mounted=true、insideText 更新、outsideUnchanged=true、appCount=1。
證據：appCount=1、mounted=true、insideText=Vue 已接管、outsideUnchanged=true
卡住先查：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。
檔案：files/starter/main.js 定位：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：mounted=true、insideText 更新、outsideUnchanged=true、appCount=1。
證據：appCount=1、mounted=true、insideText=Vue 已接管、outsideUnchanged=true
卡住先查：先數 #app 是否唯一，再把 mount 前的 shell.textContent 保存。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
靜態 shell 保留
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
把靜態 shell 放在 mount container 外。
只 mount config.mountSelector，更新後分別讀 inside 與 outside。
完整解答與原因：保存 shell 文字後只 mount 唯一 #app，讓 Vue 把內部插值更新成『Vue 已接管』；outside 保持不變可證明 island 邊界正確。