Vue是一套用于构建用户界面的渐进式JavaScript框架。在我们使用vue时通常会遇到各种错误，本文就来为大家介绍vue中5种错误处理的方法。
几种错误：
为了测试各种错误处理技术，下面介绍三种不同的错误类型（最初无论如何）。
1、引用一个不存在的变量：
<div id="app" v-cloak>
Hello, {{name}}
</div>
此示例不会向用户显示错误，但[Vue warn]控制台中将显示一条消息。
可以在此处查看此示例：
2、将变量绑定到一个被计算出来的属性，运行时此变量将抛出错误。
<div id="app" v-cloak>
Hello, {{name2}}
</div>
<script>
const app = new Vue({
el:'#app',
computed:{
name2() {
return x;
}
}
})
</script>
这会在控制台中抛出[Vue warn]和常规错误，并且不会向用户显示任何内容。
实例代码如下：
3、执行一个会抛出异常的方法
<div id="app" v-cloak>
<button @click="doIt">Do It</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
doIt() {
return x;
}
}
})
</script>
这个错误将在控制台中抛出两次，一个警告和一个常规的错误。与上次不同，只有在实际单击按钮时才会引发错误。
实例代码：
注：上面3个例子并不代表所有类型的错误。这3种是比较常见的错误。
Vue中异常处理包含以下几个方面的技巧：
-
errorHandler
-
warnHandler
-
renderError
-
errorCaptured
-
window.onerror（不是Vue特定的技术）
vue异常处理方法介绍：
1、errorHandler
这是Vue.js应用程序的通用错误处理程序。
Vue.config.errorHandler = function(err, vm, info) {
}
err是实际的错误对象，info是Vue特定的错误字符串，vm是实际的Vue应用程序。
此错误处理程序将适用于所有这些错误处理程序。
示例：
Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}
第一种错误不会触发errorHandler，它只是一个warning。
第二种错误会抛出错误被errorHandler捕获：
Error: ReferenceError: x is not defined
Info: render
最后，第三个错误给出以下结果：
Error: ReferenceError: x is not defined
Info: v-on handler
2、warnHandler
warnHandler处理Vue warnings。但请注意，在生产过程中会忽略此处理程序。方法处理程序也略有不同：
Vue.config.warnHandler = function(msg, vm, trace) {
}
trace代表了组件树。
示例：
Vue.config.warnHandler = function(msg, vm, trace) {
console.log(`Warn: ${msg}\nTrace: ${trace}`);
}
第一个错误被warnHandler捕获：
Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this proper<strong style="color:transparent">本文来源gaodai#ma#com搞@@代~&码网^</strong>ty is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. Trace: (found in <Root>)
第二和第三示例保持不变。您可以在下面查看三个实例：
3、renderError
和前面两个不同，这个技巧不适用于全局，和组件相关。并且只适用于非生产环境。
下面是一个简单的例子：
const app = new Vue({
el:'#app',
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
})
若第一个错误使用了这种方法是没有效果的，因为第一个错误是警告，而不是错误。如果在计算属性引发错误的第二个示例中对其进行测试，则会呈现该错误。
示例：
4、errorCaptured
文档中对此方法的介绍：
当捕获到任何后代组件的错误时调用。 该挂钩接收三个参数：错误，触发错误的组件实例以及包含有关捕获错误的位置信息的字符串。 挂钩可以返回false，以阻止错误进一步传播。
基于我的一些分析，这个error Handler只能在父组件中处理子组件的错误。据我所知，我们没法直接在Vue的主实例(main instance)中使用它。
为了对此进行测试，我创建了一组父/子组件，如下所示：
Vue.component('cat', {
template:`
<div><h1>Cat: </h1>
<slot></slot>
</div>`,
props:{
name:{
required:true,
type:String
}
},
errorCaptured(err,vm,info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
return false;
}
});
Vue.component('kitten', {
template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
props:{
name:{
required:true,
type:String
}
}
});
请注意该kitten组件中有一个错误。现在，如果我尝试像这样使用它：
<div id="app" v-cloak>
<cat name="my cat">
<kitten></kitten>
</cat>
</div>
捕获的信息如下:
cat EC: TypeError: dontexist is not a function
info: render
可以在下面的示例中查看：
5、 window.onerror
它是一个全局的异常处理函数，可以抓取所有的JavaScript异常。
处理程序采用以下形式：
window.onerror = function(message, source, line, column, error) {
}
source：当前脚本的url。
如果你定义了onerror，但是没有启用Vue.config.errorHandler，那么有很多异常都抓不到。Vue希望你要定义它，否则异常不会抛出去的。
如果定义errorHandler的代码有BUG，那么运行起来也不会被onerror抓到。下面的例子中，如果将oopsIDidItAgain()解注释，你就会发现这个问题。只有第二个按钮没有和Vue绑定，所以报错无论如何都会被抓到。
英文原文地址：https://www.raymondcamden.com/2019/05/01/handling-errors-in-vuejs
更多前端的相关知识，请查阅 搞代码网 ！！
以上就是Vue.js中的5种错误处理方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue.js中的5种错误处理方法
