应用配置

config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

const app = Vue.createApp({})

app.config = {...}

devtools

• 类型：boolean

• 默认值：true (生产版为 false)

• 用法：

app.config.devtools = true

配置是否允许 vue devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

errorHandler

• 类型：Function

• 默认值：undefined

• 用法：

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

指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和应用实例。

错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。

warnHandler

• 类型：Function

• 默认值：undefined

• 用法：

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

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

globalProperties

• 类型：[key: string]: any

• 默认值：undefined

• 用法：

app.config.globalProperties.foo = 'bar'

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

添加可以在应用程序内的任何组件实例中访问的全局 property。当存在按键冲突时，组件的属性将具有优先权。

这可以代替 Vue 2.x Vue.prototype 扩展：

// Before
Vue.prototype.$http = () => {}

// After
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

isCustomElement

• 类型：(tag: string) => boolean

• 默认值：undefined

• 用法：

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

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

注意，所有原生的 HTML 和 SVG 标记不需要在此函数中匹配 — Vue 解析器自动执行此检查

optionMergeStrategies

• 类型：{ [key: string]: Function }

• 默认值：{}

• 用法：

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

自定义合并策略的选项。

合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数，上下文应用实例被作为第三个参数传入。

• 参考： Custom Option Merging Strategies

performance

• 类型：boolean

• 默认值：false

• 用法：

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