#应用程序配置

config是一个包含Vue应用程序的全局配置, 你可以在你的程应用挂载之前修改如下列表属性:

const app = Vue.createApp({})

app.config = {...}

1
2
3

# errorHandler

Type: Function
Default: undefined
Usage:

app.config.errorHandler = (err, vm, info) => {
  // 错误处理
  // `info` 是Vue特定的一个错误信息, 例如. 在生命周期的钩子中发现这个错误信息
}

1
2
3
4
5

当组件在渲染函数执行和监听期间，为未捕获的错误分配一个处理程序，这个处理程序被调用时，错误信息和应用实例可被捕获。

错误跟踪服务 Sentry 和 Bugsnag 使用此选项规定官方集成。

# warnHandler

Type: Function
Default: undefined
Usage:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` 是组建层次的追踪
}

1
2
3

Vue在运行期间发成警告时，分配一个自定义处理程序。注意，这仅仅适用于在开发期间，生产上将被忽略。

# globalProperties

Type: [key: string]: any
Default: undefined
Usage:

app.config.globalProperties.foo = 'bar'

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

1
2
3
4
5
6
7

添加一个全局属性，该属性可以在应用程序内的任何组件实例中被访问。当属性名冲突时，组建内的属性将优先使用。

它可以替换 Vue 2.x 版本中的Vue.prototype拓展:

// vue 2.0中这样使用
Vue.prototype.$http = () => {}

// vue 3.0中这样使用
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

1
2
3
4
5
6

# isCustomElement

Type: (tag: string) => boolean
Default: undefined
Usage:

// 任何以‘icon-’开头的的元素，都会被识别为自定义元素
app.config.isCustomElement = tag => tag.startsWith('ion-')

1
2

指定一个方法，识别vuew为定义之外的自定义元素（例如，使用web components apis）。如果组件匹配这个条件，它不需要本地或者全局注册并且vue不会抛出类似Unknown custom element的警告。

提示：所有的原生html和svg标签不需要匹配这个函数，Vue语法解析器自动执行检查。

# optionMergeStrategies

Type: { [key: string]: Function }
Default: {}
Usage:

const app = Vue.createApp({
  mounted() {
    console.log(this.$options.hello)
  }
})

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

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

// 'Hello, Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

合并策略接收在父和子实例上定义的那个选项值，分别作为第一个和第二个参数。程序上下文这个实例作为第三个参数传递。

参考: 自定义选项策略

# performance

Type: boolean
Default: false
Usage:

设置这个值为true，启用对组件初始化、编译、渲染、更新的性能追踪再浏览器的开发工具performance/timeline这个面板。仅工作在开发模式和支持performance.mark API的浏览器。