Vue 3 起步教學：建立應用程式的核心邏輯
當我們準備使用 Vue 3 開發網頁時，第一步就是建立應用程式。但許多人在套用模板時，往往忽略了背後的運作本質：Vue 3 到底在背後幫我們做了什麼？
本文將專注於應用程式建立的核心邏輯，直接拆解 Vue 3 如何綁定 HTML 畫面、處理資料，並啟動一個完整的應用實體。
Vue 3 的核心起點：createApp
要啟動一個 Vue 3 的應用程式，核心絕對繞不開一個最關鍵的方法：createApp()。
在 Vue 3 的世界裡，每一個網站或功能模組，都可以被視為一個 應用程式。而這個應用程式的實體，就是透過 createApp() 建立出來的。
什麼是 createApp？
簡單來說，createApp() 就像是 Vue 3 的啟動馬達。您需要傳入一個 根物件，其中的 setup() 函式是 Composition API 的核心進入點，所有的響應式狀態、計算屬性、事件方法都定義在這裡。
掛載點的概念：mount
馬達啟動了，還需要把它連接到汽車的輪子上。在 Vue 中，這個步驟叫做掛載。我們會使用 mount() 方法，告訴 Vue 3 這台馬達要控制 HTML 裡面的哪一個區塊，通常是一個特定的 id。
createApp(設定物件) → .mount('#App')
↑ ↑
定義元件邏輯 告訴 Vue 接管哪個 DOM
(如 setup 函式)建立 Vue 3 應用程式的完整架構
當我們聚焦於 Vue 3 核心的 JavaScript 與 HTML 互動時，它的標準骨架與對應關係如下：
HTML 結構
在網頁上必須有一個 HTML 標籤作為 Vue 的管轄範圍。
<div id="App">
<h1>{{ message }}</h1>
</div>JavaScript 核心邏輯
接下來，是 Vue 3 運用 Composition API 運作的核心程式碼：
const { createApp, ref } = Vue;
const app = {
setup() {
const message = ref('Hello Vue 3！');
// 回傳後模板才能使用
return { message };
},
};
createApp(app).mount('#App');Vue 3 應用程式的運作三步驟
上面的程式碼雖然精簡，但它完整包含了 Vue 3 的三大核心運作機制，這也是前端工程師必備的基礎知識：
步驟 1：定義響應式資料
在 app 物件中，我們寫了 setup() 函式。這在 Vue 3 中非常重要，裡面回傳的物件，就是網頁的狀態。只要這裡面的 message 改變，HTML 畫面就會自動跟著變，這就是所謂的 響應式，Away 在授課時常說 資料驅動畫面 就是這個意思。
步驟 2：資料綁定
在 HTML 中，您看到了 {{ message }}。這是 Vue 模板語法 中的雙大括號。Vue 3 會自動去 JavaScript 的資料裡面找到同名的變數，並把資料即時渲染到畫面上。
步驟 3：雙向綁定的起點
透過 createApp(app).mount('#App')，Vue 3 正式接管了該網頁區塊。這意味著，在這個 <div> 之外的 HTML 元素，是不會受到這個 Vue 實體影響的。這樣的設計讓 Vue 3 可以非常靈活地嵌入到任何既有的網頁專案中。
總結：掌握 createApp，就掌握了 Vue 3 的大門
排除掉複雜的開發工具（Vite）與安裝過程，Vue 3 的本質就是：
用 JavaScript 定義資料，透過 createApp 建立實體，最後 mount 到 HTML 畫面上。
理解了這個核心架構後，未來無論您是要加入方法、計算屬性，還是進入更進階的 Composition API，您的核心觀念都會非常穩固。
常見問題
createApp() 的作用是什麼？
它會建立一個 Vue 應用程式實體，接收一個根元件物件作為設定。它只是把應用組裝起來，實際接管畫面要再呼叫 mount()。
mount() 一定要傳 id 選擇器嗎？
不一定。mount() 接受任何 CSS 選擇器或真實的 DOM 元素，例如：mount('.app') 或 mount(document.querySelector('#App'))。習慣用 id 是因為它唯一、語意明確。
一個頁面可以建立多個 Vue 應用程式嗎？
可以。呼叫多次 createApp() 並掛載到不同的 DOM 節點即可，各個應用之間的狀態互相獨立。在既有網站上局部導入 Vue 時很常這樣做。
為什麼 setup() 裡的變數一定要 return？
setup() 回傳的物件才會暴露給模板使用，沒有回傳的變數模板讀不到。改用 <script setup> 語法時則會自動暴露，不需要手動 return。
掛載點以外的 HTML 會被 Vue 影響嗎？
不會。Vue 只接管 mount() 指定的那個元素與其子節點，範圍外的 HTML 完全不受影響，這也是 Vue 能漸進式導入既有網站的原因。
掛載後的容器內原本的內容會怎麼樣？
掛載元素內原有的 HTML 會被當成模板編譯，或在有 render 函式時被整個取代。因此掛載點裡不要放需要保留的靜態內容。
