VUE3 入门教程 Vue 3.0 应用配置

2024-02-25 开发教程 VUE3 入门教程匿名 4℃

config是一个包含了 Vue 应用全局配置的对象。你可以在应用挂载前修改其以下 property：

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

#errorHandler

类型：Function
默认：undefined
用法：

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

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

错误追踪服务 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。属性名冲突时，组件的 property 将具有优先权。

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

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

#isCustomElement

类型：(tag: string) => boolean
默认：undefined
用法：

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

指定一个方法，用来识别在 Vue 之外定义的自定义元素（例如，使用 Web Components 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

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

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

参考：自定义选项合并策略

#performance

类型：boolean
默认：false
用法：

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

上一节： Vue 3.0 翻译

下一节： Vue 3.0 应用API

"VUE3 入门教程"的目录