详解Vue 的异常处理机制
最近需要在业务中加一个全局的filter，filter会对输入进行验证，用于进行前端监控。其中一个要处理的问题，就是验证失败后如何发送异常日志，这个过程中顺便了解了一下vue的异常处理机制。
errorCaptured、errorHandler
vue提供了两个API用于异常的捕获，分别是errorCaptured和errorHandler：
- errorCaptured
errorCaptured是组件的一个钩子函数，用于在组件级别捕获异常。当这个钩子函数返回false时，会阻止异常进一步向上冒泡，否则会不断向父组件传递，直到root组件。
- errorHandler
errorHandler是一个全局的配置项，用来在全局捕获异常。例如Vue.config.errorHandler=function(err,vm,info){}。
error.js
在vue源码中，异常处理的逻辑放在/src/core/util/error.js中：
importconfigfrom'../config'
import{warn}from'./debug'
import{inBrowser}from'./env'
exportfunctionhandleError(err:Error,vm:any,info:string){
if(vm){
letcur=vm
while((cur=cur.$parent)){
consthooks=cur.$options.errorCaptured
if(hooks){
for(leti=0;i
文件不长，向外暴露了一个handleError方法，在需要捕获异常的地方调用。handleError方法中首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用errorCaptured方法。在遍历调用完所有errorCaptured方法、或errorCaptured方法有报错时，会调用globalHandleError方法。
globalHandleError方法调用了全局的errorHandler方法。
如果errorHandler方法自己又报错了呢？生产环境下会使用console.error在控制台中输出。
可以看到errorCaptured和errorHandler的触发时机都是相同的，不同的是errorCaptured发生在前，且如果某个组件的errorCaptured方法返回了false，那么这个异常信息不会再向上冒泡也不会再调用errorHandler方法。
以上就是详解Vue的异常处理机制的详细内容，更多关于vue异常处理的资料请关注毛票票其它相关文章！