vue全局异常处理,vue事件处理机制

　　本文主要介绍vue的异常处理机制，帮助你更好的理解和学习Vue框架。感兴趣的朋友可以了解一下。

　　最近，公司需要增加一个全局过滤器。滤波器将验证输入并用于前端监控。需要处理的一个问题是如何在验证失败后发送异常日志。在这个过程中，我了解到了vue的异常处理机制。

　　errorCaptured、errorHandler

　　Vue为异常捕获提供了两个API，即errorCaptured和errorHandler:

　　错误被捕获

　　ErrorCaptured是一个组件的钩子函数，用于在组件级别捕获异常。当这个钩子函数返回false时，它将阻止异常进一步冒泡，否则它将不断传递到父组件，直到根组件。

　　错误处理程序

　　ErrorHandler是一个全局配置项，用于全局捕捉异常。例如vue . config . error handler=function(err，VM，info) {}。

　　error.js

　　在vue源代码中，异常处理的逻辑放在/src/core/util/error.js中：

　　导入配置自./config

　　从导入{ warn }。/debug

　　从导入{ inBrowser }。/env

　　导出函数handleError (err: Error，vm: any，info: string) {

　　如果(虚拟机){

　　设cur=vm

　　while ((cur=cur。$parent)) {

　　常量挂钩=cur。$options.errorCaptured

　　如果(挂钩){

　　for(设I=0；I挂钩.长度；i ) {

　　尝试{

　　const capture=hooks[i]。call(cur，err，vm，info)==false

　　如果(捕获)返回

　　} catch (e) {

　　globalHandleError(e，cur， errorCaptured hook )

　　}

　　}

　　}

　　}

　　}

　　globalHandleError(错误，虚拟机，信息)

　　}

　　函数globalHandleError (err，vm，info) {

　　if (config.errorHandler) {

　　尝试{

　　返回config.errorHandler.call(null，err，vm，info)

　　} catch (e) {

　　logError(e，null，“config.errorHandler”)

　　}

　　}

　　日志错误(错误，虚拟机，信息)

　　}

　　函数日志错误(错误，虚拟机，信息){

　　if (process.env.NODE_ENV！==生产){

　　warn(` $ { info }中的错误： ${err.toString()} `，vm)

　　}

　　/*伊斯坦布尔忽略else */

　　if(在浏览器类型的控制台中！==未定义){

　　console.error(错误)

　　}否则{

　　抛出错误

　　}

　　}

　　这个文件并不长，它向外部公开了一个handleError方法，在需要捕获异常的地方调用这个方法。在handleError方法中，首先获取报告错误的组件，然后递归查找当前组件的父组件，依次调用errorCaptured方法。当遍历中调用所有errorCaptured方法时，或者当errorCaptured方法报告错误时，将调用GlobalHandleError方法。

　　GlobalHandleError方法调用全局errorHandler方法。

　　如果errorHandler方法本身再次报告错误怎么办？在生产环境中，console.error将用于控制台中的输出。

　　可以看出，errorCaptured和errorHandler的触发时机是一样的，不同的是errorCaptured先发生，如果组件的errorCaptured方法返回false，异常信息就不会再冒泡，errorHandler方法也不会再被调用。

　　以上是对Vue的异常处理机制的详细说明。关于vue异常处理的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。