应用 API

在Vue3中，我们可以通过createApp 方法创建应用实例，如下：

import { createApp } from 'vue'

const app = createApp({})

由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法，而这些方法就是应用API。

component

注册或检索全局组件。有两个参数：

如果传入 definition 参数，返回应用实例；否则，返回组件定义。

假设我们注册一个组件如下：

app.component('my-component', {
    template: `<h1>hello world</h1>`
})

那么我们用app.component('my-component', {})检索的时候，控制台会报警告信息，这是因为：

if (context.directives[name]) {
  warn(`Directive "${name}" has already been registered in target app.`);
}

源码中做出了判断，如果上下文中存在这个组件，那么就会出现警告信息。

值得我们注意的是：在实际项目开发中，我们往往用单文件组件.vue，而不是字符串模板，这需要我们根据自己的需求来控制。

每个 Vue 应用都会暴露一个 config 对象，该对象包含此应用的配置设置，在挂载应用之前，我们可以修改其 property。

指定一个处理函数，来处理组件渲染方法和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和应用实例。用法如下：

app.config.errorHandler = (err, vm, info) => {
  // 处理错误
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

为 Vue 的运行时警告指定一个自定义处理函数。注意这只会在开发环境下生效，在生产环境下它会被忽略。

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
}

添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

这里值得我们注意的是：在Vue3中使用app.config.globalProperties，而在Vue2中使用Vue.prototype。

此方法用来识别在 Vue 之外定义的自定义元素（例如，使用 Web Components API）。如果组件符合此条件，则不需要本地或全局注册，并且 Vue 不会抛出关于 Unknown custom element 的警告。

// 任何以“ion-”开头的元素都将被识别为自定义元素
app.config.isCustomElement = tag => tag.startsWith('ion-')

为自定义选项定义合并策略。

app.config.optionMergeStrategies.hello = (parent, child, vm) => {
  return `Hello, ${child}`
}

app.mixin({
  hello: 'Vue'
})

设置为 true 以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器。

component方法可以让我们注册全局组件，但是我们在实际开发中往往使用单文件组件.vue。
config对象里面的应用配置我们在实际开发中很少用到，用的最多的就是globalProperties了，我们可以定义一个全局访问的属性，比如一个请求方法$http。

想了解更多文章，传送门已开启：回首Vue3目录篇！