首页 > 其他分享 >记录--用了那么久的Vue,你了解Vue的报错机制吗?

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

时间:2023-11-21 18:44:06浏览次数:42  
标签:Vue 错误 -- warnHandler vm errorHandler 报错

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

 

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>第二种错误 {{ b }}</div>

  computed: {
      b () {
      return x;
    }
  },
示例:
  renderError (h, err) {
    return h('pre', { style: { color: 'black' } }, err.stack)
  }

方法四: errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

app.config.errorHandler = (err, vm info) => { 
//do something
}

error是Error错误对象,vm是发生错误的组件实例的可访问组件属性,info是包含错误来源信息的字符串

方法五:window.onerror

特点:

  • 可以监听所有的JavaScript错误,也能监听Vue组件的报错,包括一些异步错误
  • 无法根据报错识别Vue组件的详细信息,也无法监听已经被try/catch捕获的错误
  • 无法监听资源加载失败的报错

window.onerror。它是一个全局的异常处理函数,可以抓取所有的 JavaScript 异常。如果函数返回true,则会阻止执行默认事件处理函数

 window.onerror = function(message, source, line, column, error) {
 //do something
 };

message是错误信息,source是发生错误的资源,line是发生错误的行号,column是发生错误的列数 error是Error错误对象

在errorHandler的参数中err指代 error 对象,info是一个 Vue 特有的字符串,vm指代 Vue 应用本身。在一个页面你可以有多个 Vue 应用。这个 error handler 可以作用到所有的应用。warning并不会触发 errorHandler。只有抛出了错误才会触发

第一种:引用一个不存在的变量:

在Vue中我们有时候会在编写代码时出现错误,在template中引用了未定义的变量,导致报异常,这种异常在控制台只会报[Vue warn]并不会报 ReferenceError

<div>第一种错误, {{ a }}</div>

使用warnHandler来抓取错误

Vue.config.warnHandler = function (msg, vm, trace) {
  console.log(`错误: ${msg}\n错误对象: ${trace}`);
}

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

将变量绑定到一个被计算出来的属性,计算的时候会抛出异常代码会在控制台抛出一个[Vue warn]和一个常规的错误,网页出现白屏

  <div>第二种错误 {{ b }}</div>
  computed: {
      b () {
      return x;
    }
  },

使用errorHandler捕捉错误

import Vue from 'vue'

Vue.config.errorHandler = function (err, vm, info) {
  console.log(`错误: ${err.toString()}\n错误信息: ${info}`);
  console.log(vm)
};

使用warnHandler来抓取错误

Vue.config.warnHandler = function (msg, vm, trace) {
  console.log(`错误: ${msg}\n错误对象: ${trace}`);
}

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

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

<button @click="test1">JS错误</button>

 methods: {
    test1 () {
      return b
    },

使用errorHandler捕捉错误

第三种错误信息也可以被捕获,但是要在被点击按钮之后出现报错之后才能被捕获

import Vue from 'vue'

Vue.config.errorHandler = function (err, vm, info) {
  console.log(`错误: ${err.toString()}\n错误信息: ${info}`);
  console.log(vm)
};

使用warnHandler来抓取错误

Vue.config.warnHandler = function (msg, vm, trace) {
  console.log(`错误: ${msg}\n错误对象: ${trace}`);
}

本文转载于:

https://juejin.cn/post/7147594391752802335

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:Vue,错误,--,warnHandler,vm,errorHandler,报错
From: https://www.cnblogs.com/smileZAZ/p/17847291.html

相关文章

  • centos7下载安装rabbitmq
    下载rabbitmqsurootmkdir/data/rabbitmqcd/data/rabbitmqwgethttps://github.com/rabbitmq/rabbitmq-server/releases/download/rabbitmq_v3_6_16/rabbitmq-server-3.6.16-1.el7.noarch.rpm或者通过Windows下载,xshell、Xftp传送文件。还得准备erlang语言(erlang-21.3.8.......
  • Redis主从
    如何配置:方式一:6380是从,6379是主在6380上执行(去从库配置,配置主库)-在从库执行SLAVEOF127.0.0.16379,-断开关系slaveofnoone方式二:配置文件(配在从库的配置文件中)slaveof127.0.0.16379slave-read-onlyyes"""vimredis.conf #写入......
  • 8.2 Windows驱动开发:内核解锁与强删文件
    在某些时候我们的系统中会出现一些无法被正常删除的文件,如果想要强制删除则需要在驱动层面对其进行解锁后才可删掉,而所谓的解锁其实就是释放掉文件描述符(句柄表)占用,文件解锁的核心原理是通过调用ObSetHandleAttributes函数将特定句柄设置为可关闭状态,然后在调用ZwClose将其文件关......
  • CDN绕过
    前言:本篇来介绍CDN的绕过和相关知识1.0什么CDN,为什么要绕过CDN的全程是内容分发网络,在之前我们大致讲过其的作用,用于在请求较远服务器的资源时,在离用户较近的CDN服务器上对资源进行缓存,从而在下次自己和附近他人请求时直接从CDN服务器上获取资源,从而增加访问速度,但对企业来说......
  • 软件设计模式学习每日总结-第九天
    第九天组合模式:组合多个对象形成树形结构,使得叶子和容器的使用具有一致性。透明组合模式:声明了对象的所有的方法。安全组合模式:不声明对象的方法。 ......
  • PASETO - Platform-Agnostic SEcurity TOkens
       ......
  • 超好用的音视频开发指南来咯,建议人手一份
    前言现在市面上的图像,音视频软件越来越多,最近两年也是直播,短视频的红利期。而图像、音视频一直是互联网视觉的入口,掌握并熟练运用音视频、图像技术已经是当前互联网时代不可或缺的技能,而且这个技能是具有沉淀性质的。对于一名合格的音视频开发者来说,我们要掌握的不单单只是一点,而且......
  • 普冉PY32系列(十) 基于PY32F002A的6+1通道遥控小车I - 综述篇
    目录普冉PY32系列(一)PY32F0系列32位CortexM0+MCU简介普冉PY32系列(二)UbuntuGCCToolchain和VSCode开发环境普冉PY32系列(三)PY32F002A资源实测-这个型号不简单普冉PY32系列(四)PY32F002A/003/030的时钟设置普冉PY32系列(五)使用JLinkRTT代替串口输出日志普冉P......
  • 无涯教程-Sed - 循环语句
    与其他编程语言一样,SED也提供了循环和分支函数来控制执行流程。在本章中,无涯教程将探索更多有关如何在SED中使用循环和分支的信息。SED中的循环的工作方式类似于goto语句。SED可以跳到标签所标签的行,然后继续执行其余命令。在SED中,可以如下定义label :label:start:end......
  • 年底了,还没Offer怎么办?
    千万不要放弃秋招补录!!秋招是应届生们拿Offer的最佳的机会,还没有拿到Offer的同学千万不要放弃秋招!很多同学在本次秋招中还没有拿到Offer或者拿到的Offer并不是最适合的,因此想就此放弃,等待明年的春招。如果这样想,那就错过了大好机会!僧多粥少的春招由于春招时间上更临近毕业,大家的焦虑......