Vue.js中的5种错误处理方法

Vue是一套用于构建用户界面的渐进式JavaScript框架。在我们使用vue时通常会遇到各种错误,本文就来为大家介绍vue中5种错误处理的方法。

几种错误:

为了测试各种错误处理技术,下面介绍三种不同的错误类型(最初无论如何)。

1、引用一个不存在的变量:

<div id="app" v-cloak>
  Hello, {{name}}
</div>

此示例不会向用户显示错误,但[Vue warn]控制台中将显示一条消息。

1.jpg

可以在此处查看此示例:

2、将变量绑定到一个被计算出来的属性,运行时此变量将抛出错误。

<div id="app" v-cloak>
  Hello, {{name2}}
</div>

<script>
const app = new Vue({
  el:'#app',
  computed:{
    name2() {
      return x;
    }
  }
})
</script>

这会在控制台中抛出[Vue warn]和常规错误,并且不会向用户显示任何内容。

2.jpg

实例代码如下:

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.jpg

实例代码:

注:上面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 property 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

更多web前端知识,请查阅 HTML中文网 !!

以上就是Vue.js中的5种错误处理方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏