config
是一个包含了 Vue 应用全局配置的对象。你可以在应用挂载前修改其以下 property:
const app = Vue.createApp({})
app.config = {...}
Function
undefined
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
}
指定一个处理函数,来处理组件渲染方法执行期间以及侦听器抛出的未捕获错误。这个处理函数被调用时,可获取错误信息和应用实例。
错误追踪服务 Sentry 和 Bugsnag 使用此选项提供官方集成。
Function
undefined
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 是组件的继承关系追踪
}
为 Vue 的运行时警告指定一个自定义处理函数。注意这只会在开发环境下生效,在生产环境下它会被忽略。
[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 = () => {}
(tag: string) => boolean
undefined
// 任何以“ion-”开头的元素都将被识别为自定义元素
app.config.isCustomElement = tag => tag.startsWith("ion-")
指定一个方法,用来识别在 Vue 之外定义的自定义元素(例如,使用 Web Components API)。如果组件符合此条件,则不需要本地或全局注册,并且 Vue 不会抛出关于 Unknown custom element
的警告。
注意,所有原生 HTML 和 SVG 标记不需要在此函数中匹配——Vue 解析器自动执行此检查。
{ [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
为自定义选项定义合并策略。
合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,引用上下文实例被作为第三个参数传入。
boolean
false
设置为 true
以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器。
#componentProps:is - string | Component用法:渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。is 的值是...
本节代码示例使用单文件组件的语法本指南假定你已经阅读了组合式 API 简介和响应性基础。如果你不熟悉组合式 API,请先阅读此文...
#表单当创建一个表单,你可能使用到以下几个元素:form、label、input、textarea 和 button。标签通常放置在表单字段的顶部或左...
这里我们可以先一起来玩一个“大家来找茬”的游戏:图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件...
除了工作区的配色,你也可以修改编辑器内代码的颜色。这个就真的强大了,因为为代码书写语法文件和配色文件,都是非常复杂的,但...