Vue.config.errorHandler未捕获错误的处理函数

如下官方api说明errorHandler-0:

Vue.config.errorHandler未捕获错误的处理函数_第1张图片
errorHandler-0

先看下调用结果:我们在一个组件的生命周期里面运行一段错误代码如下图:errorHandler-1

Vue.config.errorHandler未捕获错误的处理函数_第2张图片
errorHandler-1

看下结果:这是未加errorHandler的结果,很明显变量不存在,代码错误如图errorHandler-2,可能会阻塞代码继续执行下去,导致网页崩溃。我们通常处理未知代码时会用到try.....catch,来避免这种情况。没错vue只是加了一个统一处理处,使用起来更方便。加过errorHandler之后的运行代码看下如图errorHandler-3,errorHandler-4

Vue.config.errorHandler未捕获错误的处理函数_第3张图片
errorHandler-2

errorHandler-3在main.js里面加如errorHandler函数:

errorHandler-4是运行结果:

Vue.config.errorHandler未捕获错误的处理函数_第4张图片
errorHandler-3
Vue.config.errorHandler未捕获错误的处理函数_第5张图片
errorHandler-4

接下来进入源码里面怎么做的,我们在做其他其他项目也可以借鉴下errorHandler-5:

Vue.config.errorHandler未捕获错误的处理函数_第6张图片
errorHandler-5

如果你定义了errorHandler函数,则会调你的方法。看下哪里都调用了globalHandleError,在当前文件里面handleError调用了errorHandler-6,看下handleError函数的调用,如果所料不错,正如api里面介绍的,生命周期钩子里,Vue 自定义事件处理函数,v-on DOM 监听器内部会调用。一个一个来找下,

Vue.config.errorHandler未捕获错误的处理函数_第7张图片
errorHandler-6

指令里面errorHandler-7:

Vue.config.errorHandler未捕获错误的处理函数_第8张图片
errorHandler-7

nextTick里面errorHandler-8:

Vue.config.errorHandler未捕获错误的处理函数_第9张图片
errorHandler-8

watch里面:errorHandler-9

Vue.config.errorHandler未捕获错误的处理函数_第10张图片
errorHandler-9

还有很多。

你可能感兴趣的:(Vue.config.errorHandler未捕获错误的处理函数)