創建一(yī)個 Vue 應用

應用實例 ​

每個 Vue 應用都(dōu)是通(tōng)過 createApp 函數(shù)創建一(yī)個新的 應用實例：

js

import { createApp } from 'vue'

const app = createApp({

/* 根組件選項 */

})

根組件 ​

我們傳入 createApp 的對象實際上(shàng)是一(yī)個組件，每個應用都(dōu)需要(yào)一(yī)個“根組件”，其他(tā)組件将作(zuò)為(wèi)其子組件。

如(rú)果你使用的是單文件組件，我們可(kě)以直接從(cóng)另一(yī)個文件中導入根組件。

js

import { createApp } from 'vue'

// 從(cóng)一(yī)個單文件組件中導入根組件

import App from './App.vue'

const app = createApp(App)

雖然本指南中的許多示例隻需要(yào)一(yī)個組件，但(dàn)大多數(shù)真實的應用都(dōu)是由一(yī)棵嵌套的、可(kě)重用的組件樹(shù)組成的。例如(rú)，一(yī)個待辦事項 (Todos) 應用的組件樹(shù)可(kě)能(néng)是這(zhè)樣的：

App (root component)

├─ TodoList

│ └─ TodoItem

│ ├─ TodoDeleteButton

│ └─ TodoEditButton

└─ TodoFooter

├─ TodoClearButton

└─ TodoStatistics

我們會在指南的後續章(zhāng)節中讨論如(rú)何定義和(hé)組合多個組件。在那(nà)之前，我們得先關注一(yī)個組件內(nèi)到底發生了(le)什麽。

挂載應用 ​

應用實例必須在調用了(le) .mount() 方法後才會渲染出來。該方法接收一(yī)個“容器”參數(shù)，可(kě)以是一(yī)個實際的 DOM 元素或是一(yī)個 CSS 選擇器字符串：

html

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

js

app.mount('#app')

應用根組件的內(nèi)容将會被渲染在容器元素裏面。容器元素自(zì)己将不會被視(shì)為(wèi)應用的一(yī)部分。

.mount() 方法應該始終在整個應用配置和(hé)資源注冊完成後被調用。同時(shí)請(qǐng)注意，不同于其他(tā)資源注冊方法，它的返回值是根組件實例而非應用實例。

DOM 中的根組件模闆 ​

當在未采用構建流程的情況下(xià)使用 Vue 時(shí)，我們可(kě)以在挂載容器中直接書(shū)寫根組件模闆：

html

<div id="app">

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

</div>

js

import { createApp } from 'vue'

const app = createApp({

data() {

return {

count: 0

}

}

})

app.mount('#app')

當根組件沒有設置 template 選項時(shí)，Vue 将自(zì)動使用容器的 innerHTML 作(zuò)為(wèi)模闆。

應用配置 ​

應用實例會暴露一(yī)個 .config 對象允許我們配置一(yī)些應用級的選項，例如(rú)定義一(yī)個應用級的錯誤處理器，用來捕獲所有子組件上(shàng)的錯誤：

js

app.config.errorHandler = (err) => {

/* 處理錯誤 */

}

應用實例還提供了(le)一(yī)些方法來注冊應用範圍內(nèi)可(kě)用的資源，例如(rú)注冊一(yī)個組件：

js

app.component('TodoDeleteButton', TodoDeleteButton)

這(zhè)使得 TodoDeleteButton 在應用的任何地(dì)方都(dōu)是可(kě)用的。我們會在指南的後續章(zhāng)節中讨論關于組件和(hé)其他(tā)資源的注冊。你也可(kě)以在 API 參考中浏覽應用實例 API 的完整列表。

确保在挂載應用實例之前完成所有應用配置！

多個應用實例 ​

應用實例并不隻限于一(yī)個。createApp API 允許你在同一(yī)個頁面中創建多個共存的 Vue 應用，而且每個應用都(dōu)擁有自(zì)己的用于配置和(hé)全局資源的作(zuò)用域。

js

const app1 = createApp({

/* ... */

})

app1.mount('#container-1')

const app2 = createApp({

/* ... */

})

app2.mount('#container-2')

如(rú)果你正在使用 Vue 來增強服務端渲染 HTML，并且隻想要(yào) Vue 去控制一(yī)個大型頁面中特殊的一(yī)小部分，應避免将一(yī)個單獨的 Vue 應用實例挂載到整個頁面上(shàng)，而是應該創建多個小的應用實例，将它們分别挂載到所需的元素上(shàng)去。