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

如下官方api说明errorHandler-0:

errorHandler-0

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

errorHandler-1

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

errorHandler-2

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

errorHandler-4是运行结果:

errorHandler-3
errorHandler-4

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

errorHandler-5

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

errorHandler-6

指令里面errorHandler-7:

errorHandler-7

nextTick里面errorHandler-8:

errorHandler-8

watch里面:errorHandler-9

errorHandler-9

还有很多。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容