#应用程序配置

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

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

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

# 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的浏览器。