[Vue.js 3.0] API – Application Config

# Application Config

Every Vue application exposes a config object that contains the configuration settings for that application:

const app = Vue.createApp({})
console.log(app.config)

You can modify its properties, listed below, before mounting your application.

# errorHandler

  • Type: Function

  • Default: undefined

  • Usage:

app.config.errorHandler = (err, vm, info) => {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in
}

Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the application instance.

Error tracking services Sentry(opens new window) and Bugsnag(opens new window) provide official integrations using this option.

# warnHandler

  • Type: Function

  • Default: undefined

  • Usage:

app.config.warnHandler = function(msg, vm, trace) {
// `trace` is the component hierarchy trace
}

Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production.

# globalProperties

  • Type: [key: string]: any

  • Default: undefined

  • Usage:

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

Adds a global property that can be accessed in any component instance inside the application. The component’s property will take priority when there are conflicting keys.

This can replace Vue 2.x Vue.prototype extending:

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

# isCustomElement

  • Type: (tag: string) => boolean

  • Default: undefined

  • Usage:

// any element starting with 'ion-' will be recognized as a custom one
app.config.isCustomElement = tag => tag.startsWith('ion-')

Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If component matches this condition, it won't need local or global registration and Vue won't throw a warning about an Unknown custom element.

Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically

Important

This config option is only respected when using the runtime compiler. If you are using the runtime-only build, isCustomElement must be passed to @vue/compiler-dom in the build setup instead - for example, via the compilerOptions option in vue-loader(opens new window).

# 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'

Define merging strategies for custom options.

The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context application instance is passed as the third argument.

  • See also: Custom Option Merging Strategies

# performance

  • Type: boolean

  • Default: false

  • Usage:

Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the performance.mark(opens new window) API.

以上是[Vue.js 3.0] API – Application Config的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>