用了那么久的Vue,你了解Vue的报错机制吗?

本文深入探讨Vue的异常处理机制,包括errorHandler、warnHandler、renderError、errorCaptured和window.onerror的用法。通过实例解析在不同场景下如何捕获和处理Vue中的错误,确保应用稳定运行。
摘要由CSDN通过智能技术生成

Vue的5种处理Vue异常的方法

相信大家对Vue都不陌生。在使用Vue的时候也会遇到报错,也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗?vue 是如何处理异常的呢?接下来和大家介绍介绍,Vue是如何处理这几种常见的报错的。

先和大家说说常见的五种处理报错的方法

Vue 中异常处理包含以下几个方面:

  • errorHandler
  • warnHandler
  • renderError
  • errorCaptured
  • window.onerror (不仅仅针对 Vue)

方法一:errorHandler

在main.js文件中添加,或者引入Vue

import Vue from 'vue'
Vue.config.errorHandler = function(err, vm, info) {
//do something
}; 

err指代 error 对象,info是一个 Vue 特有的字符串,vm指代 Vue 应用本身。记住在一个页面你可以有多个 Vue 应用。这个 error Handler 作用到所有的应用。

方法二:warnHandler

warnHandler用来捕获 Vue的warning。但是在生产环境是不起作用的。

import Vue from 'vue'
Vue.config.warnHandler = function(msg, vm, trace) {}; 

msg是报错信息和vm是报错的虚拟DOM,trace代表了组件树。

方法三: renderError

和前面两个不同,这个技巧不适用于全局,和组件相关。并且只适用于非生产环境

错误代码:

 <div&g
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值