简单学习5种处理Vue.js异常的方法

　　


　　

　　

为了测试各种异常处理技巧,我故意触发三种类型的错误。

　　

<强>第一种:引用一个不能存在的变量:

　　 　　 　　& lt; div id=坝τ谩眝-cloak> 　　你好,{{名称}} 　　& lt;/div> 　　 　　

上述代码运行后不会抛出错误,但是在控制台会有[Vue警告]消息。

　　

简单学习5种处理Vue.js异常的方法

　　

你可以在Codepen查看例子完整代码。

　　

<强>第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常。

　　 　　 　　& lt; div id=坝τ谩眝-cloak> 　　你好,{{name2}} 　　& lt;/div> 　　& lt; script> 　　const应用=new Vue ({ 　　埃尔:“#应用”, 　　计算:{ 　　name2 () { 　　返回x; 　　} 　　} 　　}） 　　& lt;/script> 　　 　　

运行上述代码会在控制台抛出一个(Vue警告)和一个常规的错误,网页白屏。

　　

简单学习5种处理Vue.js异常的方法

　　

你可以在Codepen查看例子完整代码。

　　

<强>第三种:执行一个会抛出异常的方法

　　 　　 　　& lt; div id=坝τ谩眝-cloak> 　　& lt;按钮@click=" doIt "祝辞It 　　& lt;/div> 　　& lt; script> 　　const应用=new Vue ({ 　　埃尔:“#应用”, 　　方法:{ 　　doIt () { 　　返回x; 　　} 　　} 　　}） 　　& lt;/script> 　　 　　

这个错误在控制台也(Vue警告)和常规报错。和上一个错误的区别在于,只有你点击了按钮才会触发函数调用,才会报错。

　　

简单学习5种处理Vue.js异常的方法

　　

你可以在Codepen查看例子完整代码。
　　

　　

在继续之前,我想声明上面3个例子并不代表所有类型的错误。这3种是比较常见的错误。
　　

　　

好了,我们该怎么处理异常呢?我很惊讶在Vue的文档中竟然没有介绍异常处理的章节。

　　

简单学习5种处理Vue.js异常的方法

　　

是的,文档中是有一个,但是介绍极其简短。

　　
　　

如果在组件渲染时出现运行错误,错误将会被传递至全局Vue.config。errorHandler配置函数(如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如哨兵,它为Vue提供了官方集成。

　　 　　

注:国产BUG监控服务Fundebug也为Vue提供了官方集成。
　　我个人建议官方应该有详细的介绍。总的来说,Vue中异常处理包含以下几个方面的技巧:

　　
    　　<李> errorHandler李 　　<李> warnHandler李 　　<李> renderError李 　　<李> errorCaptured李 　　<李>窗口。onerror(不仅仅针对Vue) 　　
　　

<>强技巧1:errorHandler
　　

　　

我们要学习的第一个技巧是errorHandler。你也许知道,这是Vue中最广泛使用的异常处理方式。
　　

　　 　　 　　Vue.config。errorHandler=函数(呃,vm,信息){ 　　} 　　 　　

犯错指代错误对象,信息是一个Vue特有的字符串,vm指代Vue应用本身。记住在一个页面你可以有多个Vue应用。这个错误处理程序作用到所有的应用。
　　

　　 　　 　　Vue.config。errorHandler=函数(呃,vm,信息){ 　　控制台。日志(“错误:$ {err.toString()} \?宁弗:${信息}'); 　　} 　　 　　

第一种错误不会触发errorHandler,它只是一个警告。
　　

　　

第二种错误会抛出错误被errorHandler捕获:
　　

　　 　　 　　错误:ReferenceError: x没有定义 　　信息:呈现 　　 　　

第三种错误也会被捕获:
　　

　　 　　 　　错误:ReferenceError: x没有定义 　　信息:v处理 　　 　　

记住信息里面的信息也是非常有用的。
　　

　　

<>强技巧2:warnHandler
　　

　　

warnHandler用来捕获Vue警告。记住在生产环境是不起作用的。
　　

　　 　　 　　Vue.config。warnHandler=函数(味精,vm,跟踪){ 　　} 　　 　　

味精和vm都容易理解,跟踪代表了组件树。请看下面的例子:

简单学习5种处理Vue.js异常的方法