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，您的核心觀念都會非常穩固。