EP2 - 創建 Vue App

繼續看Document，練習到直到可以活用～
雖然我是實用派的～但還是要研究框架文件 @@

App實例 - application instance

每個 Vue 應用程式都會從使用 createApp 函數創建一個新的應用程式實例開始：

import { createApp } from 'vue'

const app = createApp({
  /* 根組件選項 */
})

根組件 - Root Component

傳遞給 createApp 的對象實際上是一個組件。每個應用程式都需要一個「根組件」，這個根組件可以包含其他組件作為它的子組件。

如果你使用的是單檔組件 (Single-File Components)，我們通常會從另一個文件中導入根組件：

import { createApp } from 'vue'
// 從單檔組件中導入根組件 App
import App from './App.vue'

const app = createApp(App)

雖然文件中的許多範例只需要一個組件，但大多數實際應用程式會被組織成一個由嵌套、可重用的組件構成樹狀結構。例如，一個 Todo 應用程式的組件樹可能如下所示：

App (根組件)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

文件後續將討論如何定義和組合多個組件。在此之前，將專注於單個組件內部運作。

掛載App - Mounting the App

應用程式實例在調用其 .mount() 方法之前，不會渲染任何內容。.mount() 方法需要一個「容器」參數，這個參數可以是一個實際的 DOM 元素或是一個選擇器字符串：

<div id="app"></div>

app.mount('#app')

應用程式的根組件的內容將會渲染在這個容器元素內部，但容器元素本身並不被視為應用程式的一部分。

應該在完成所有應用程式配置和資源註冊後再調用 .mount() 方法。此外，請注意其返回值與資源註冊方法不同，是根組件實例而不是應用程式實例。

在 DOM 中的根組件模板

通常，根組件的模板是組件自身的一部分，但也可以單獨提供模板，直接將其寫在掛載容器內：

<div id="app"> 
	<button @click="count++">{{ count }}</button> 
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

如果根組件沒有模板選項，Vue 會自動使用容器的 innerHTML 作為模板。

在 DOM 中的模板通常用於無需構建步驟的 Vue 應用程式中。它們也可以與伺服器端框架結合使用，其中根模板可能由伺服器動態生成。

App配置 - App Configurations

應用程式實例（Application Instance）提供了一個 .config 物件，讓我們可以配置一些應用層級的選項。例如，定義一個應用層級的錯誤處理程序，捕獲所有後代組件中的錯誤：

app.config.errorHandler = (err) => {
  /* handle error */
}

應用程式實例還提供了一些方法來註冊應用範圍資產（assets）。例如，註冊一個組件：

app.component('TodoDeleteButton', TodoDeleteButton)

這樣就使得 TodoDeleteButton 組件可以在應用的任何地方使用。文件後續章節中討論組件和其他類型資產的註冊。你也可以在 API 參考中瀏覽完整的應用程式實例 API 列表。確保在掛載應用程式之前應用所有的配置！

多個App實例 - Multiple application instances

在同一個頁面上，你不僅限於使用單個應用程式實例。createApp API 允許多個 Vue 應用程式共存於同一頁面上，每個應用程式都有自己的配置範圍和全局資產：

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

如果你使用 Vue 來增強伺服器渲染的 HTML，只需要 Vue 來控制大頁面中的特定部分，應避免在整個頁面上掛載單個 Vue 應用程式實例。相反，應創建多個小型應用程式實例，並將它們掛載到各自負責的元素上。

看完這章節好像有點懂又不太懂～＠＠～