引言

本文主要介紹了在Vue中如何建立一個APP例項, APP例項掛載原理以及她的配置, 兩外還介紹了頁面中可以掛載多個APP例項, 可以互補干擾, 對於新手來說是瞭解Vue3的必備知識了.

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-create-a-vue-application-in-vue-3-offiicial-doc/

歡迎訪問我的部落格: http://blog.duhbb.com/

Vue官方文件翻譯 Creating a Vue Application

application例項

每個Vue專案開始都會通過createApp函式來建立一個application instance

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

所以:這個app到底是啥,createApp這個函式執行了什麼邏輯?

Root Component(根元件)

我們傳入到createApp中的實際上是一個元件.每個app都需要一個"根元件",並且用它來包含其他的元件作為它的寶寶.

如果你使用的是Single-File Component的話,只需要從其他的檔案中引入根元件就行了:

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)
 

雖然在這個文件中只需要單一的一個元件就可以演示了,但是在實際的專案中這些元件都被組織為樹形結構了,作為可複用的元件.

例如一個Todo應用的元件可能看起來長這個樣:

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

我們將在後面講解如何定義元件,並將它們組織起來,不過在這之前我們還是把目光集中在單個元件上.

掛載App

一個應用例項並不會render任何東西, 直到她的.mount

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

app.mount('#app')

app的根節點中的內容將會在這個容器中被render, 容器本身並不會被包含在app中.

html的容器提供了一個可掛載的地方, Vue就在這個裡面發揮了, 嘿嘿, 海闊憑魚躍, 天高任鳥飛.

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作為模板, 如果根元件並沒有包含template的話.

App配置

application instance會暴露一個.config的物件, 我們可以在其中進行一些應用級別的配置, 例如定義app級別的錯誤處理器, 來捕獲所有子元件的異常.

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

application instance還可以提供一些方法來註冊應用級別的元件, 比如, 註冊一個元件:

app.component('TodoDeleteButton', TodoDeleteButton)

醬紫的話, 就可以在我們滴app的任何地方都可以使用這個元件.

後面我們會再介紹元件的註冊.

在API reference中我們可以查詢更多滴API.

注意嘍: 要想配置生效得在app掛載之前生效, 之後的話不會有效的.

多個application例項

我們沒有限制你在單個頁面中只能掛載一個app. createApp API允許多個Vue例項在一個頁面共存, 每個都可以有自己的作用域以及全域性元件.

你就說刺不刺激! 一個我都沒有玩兒明白, 你讓我搞幾個!!! WTF.

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

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

如果你只是需要Vue來增強服務端HTML渲染, 並且只是想控制區域性地方的話, 就不要將 Vue 例項掛載到整個頁面上.

可以建立多個小的應用例項, 然後把她們掛載到各自負責的地方.

結束語

本文主要介紹了在Vue中如何建立一個APP例項, APP例項掛載原理以及她的配置, 兩外還介紹了頁面中可以掛載多個APP例項, 可以互補干擾, 對於新手來說是瞭解Vue3的必備知識了.

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-create-a-vue-application-in-vue-3-offiicial-doc/

歡迎訪問我的部落格: http://blog.duhbb.com/