Vue官方文档翻译 Creating a Vue Application

引言

本文主要介绍了在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方法被调用了. mount方法需要一个容器作为参数, 既可以是一个实际的DOM元素也可以是一个选择器.

<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/