Vue.config.warnHandler运行时警告赋予一个自定义处理函数

官方api:warnHandler-0

Vue.config.warnHandler运行时警告赋予一个自定义处理函数_第1张图片
warnHandler-0

我们在开发环境经常会看到如下图所示:warnHandler-1,所示的报错,这个报错其实就是warnHandler报出来的,用以追踪错误具体来自哪个组件。

warnHandler-1

看下实现方式,先看下只在开发环境生效在哪判断的:warnHandler-2

Vue.config.warnHandler运行时警告赋予一个自定义处理函数_第2张图片
warnHandler-2

看到这里不用解释了,非生产环境下生效。

可以看出图warnHandler-1报的错误来自generateComponentTrace这个函数:

看见这段,再看看warnHandler-1的格式,没错这里就是生成warnHandler-1字符串的地方:

Vue.config.warnHandler运行时警告赋予一个自定义处理函数_第3张图片
warnHandler-3

当然还有一个方法:formatComponentName这个方法是定位到报错的组件,如果你在组件里面定义了name属性值,会取这个值,否则会匹配文件名,作为追踪路径,当然还有一个classify,这个只是首字母大写。

Vue.config.warnHandler运行时警告赋予一个自定义处理函数_第4张图片
warnHandler-4

你可能感兴趣的:(Vue.config.warnHandler运行时警告赋予一个自定义处理函数)