当前位置：首页 > news >正文

怎么处理 Vue 项目中的错误的？

news 来源：原创 2025/7/20 22:42:40

一、错误类型

任何一个框架，对于错误的处理都是一种必备的能力

在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。

主要的错误来源包括：

后端接口错误
代码中本身逻辑错误

二、如何处理

后端接口错误

通过axios的interceptor实现网络请求的response先进行一层拦截

apiClient.interceptors.response.use(response => {return response;},error => {if (error.response.status == 401) {router.push({ name: "Login" });} else {message.error("出错了");return Promise.reject(error);}}
);

代码逻辑问题

全局设置错误处理

设置全局错误处理函数

Vue.config.errorHandler = function (err, vm, info) {// handle error// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子// 只在 2.2.0+ 可用
}

errorHandler指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例

不过值得注意的是，在不同 Vue 版本中，该全局 API 作用的范围会有所不同：

从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩

从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了

从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理

生命周期钩子

errorCaptured是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用

基本类型

(err: Error, vm: Component, info: string) => ?boolean

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

参考官网，错误传播规则如下：

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler
一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler

下面来看个例子

定义一个父组件cat

Vue.component('cat', {template:`<div><h1>Cat: </h1>

怎么处理 Vue 项目中的错误的？

一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括：后端接口错误代码中本身逻辑错误二、如何处理后端接口错误通过axi…...

编程日记 2025/7/20 22:42:40

Elasticsearch原生linux部署集群和docker部署集群

Easticsearch 是一个分布式的搜索和分析引擎，广泛应用于日志分析、全文检索、实时数据分析等场景。为了满足高可用性和高性能的需求，Elasticsearch 通常以集群的方式部署。部署 Elasticsearch 集群时，可以选择两种主要方式：原生 L…...

编程日记 2025/7/16 19:29:52

缓存设计模式

缓存设计模式（Cache Design Pattern）是一种用于存储和管理频繁访问数据的技术，旨在提高系统性能、降低数据库或后端服务的负载，并减少数据访问延迟。以下是几种常见的缓存设计模式，并用 Python Redis 进行示例代码实现…...

编程日记 2025/7/20 22:35:24

详解TCP的四次握手和三次挥手，以及里面每个阶段的状态

TCP 三次握手（连接建立） TCP 连接建立通过三次握手完成，确保双方同步初始序列号并确认可达性。阶段说明第一次握手客户端 → 服务器：发送 SYN（同步请求），携带初始序列号 seq x。客户端状态…...

编程日记 2025/7/20 22:41:10

Linux文件目录管理指令详解（上篇）

Linux文件目录管理指令详解（上篇） 在Linux操作系统中，文件目录管理是基础且重要的技能。通过一系列指令，用户可以高效地浏览、创建、修改和删除文件及目录。本文将详细介绍Linux中常用的文件目录管理类指令，包括pwd、…...

编程日记 2025/7/17 10:43:43

libbpf-tools/gethostlatency 追踪glibc中的getaddrinfo、gethostbyname、gethostbyname2函数用时 # /usr/share/bcc/libbpf-tools/gethostlatency TIME PID COMM LATms HOST 14:58:32 8418 curl 313.635 www.taobao.com以# cur…...

编程日记 2025/7/19 22:25:21

无参数读文件和RCE

什么是无参数？ 无参数（No-Argument）的概念，顾名思义，就是在PHP中调用函数时，不传递任何参数。我们需要利用仅靠函数本身的返回值或嵌套无参数函数的方式，达到读取文件或远程命令执行&#xff0…...

编程日记 2025/7/18 22:45:18

SpringMVC_day02

一、SSM 整合核心步骤依赖管理包含 SpringMVC、Spring JDBC、MyBatis、Druid 数据源、Jackson 等依赖。注意点：确保版本兼容性（如 Spring 5.x 与 MyBatis 3.5.x）。配置类 SpringConfig：扫描 Service 层、启用事务管理、导入…...

编程日记 2025/7/17 11:27:16

在Linux、Windows系统上安装开源InfluxDB——InfluxDB OSS v2并设置开机自启的保姆级图文教程

一、进入InfluxDB下载官网 InfluxData 文档https://docs.influxdata.com/Install InfluxDB OSS v2 | InfluxDB OSS v2 Documentation...

编程日记 2025/7/20 22:42:39

LinkedIn数据抓取零风险指南：亮数据住宅代理实现企业级合规采集

亮数据住宅代理实现企业级合规采集一、前言二、尝试使用三、使用体验高效稳定易用性：合规与安全：技术支持： 四、适用场景五、推荐程度六、试用地址一、前言最近一位猎头小伙伴找到我，说目前很多公司的出海业务都在招人&#x…...

编程日记 2025/7/20 22:34:02

ROS2的发展历史、核心架构和应用场景

以下是对**ROS2（Robot Operating System 2）**的发展历史、核心架构和应用场景的详细解析，覆盖其技术演变、关键特性和生态系统： 一、ROS2的诞生背景：从ROS1到ROS2 1. ROS1的历史与局限 ROS1的起源： 2007年…...

编程日记 2025/7/10 5:21:02

PHP eval 长度限制绕过与 Webshell 获取

在 PHP 代码中，如果 eval($param); 存在且长度受限，并且过滤了 eval 和 assert，仍然可以通过多种方法绕过限制，获取 Webshell。源码 <?php $param $_REQUEST[param]; if(strlen($param)<17 && stripos($param,…...

编程日记 2025/7/20 12:50:50

自然语言处理（14:处理时序数据的层的实现)

系列文章目录第一章 1:同义词词典和基于计数方法语料库预处理第一章 2:基于计数方法的分布式表示和假设，共现矩阵，向量相似度第一章 3:基于计数方法的改进以及总结第二章 1:word2vec 第二章 2:word2vec和CBOW模型的初步实现第二章 3:CBOW模型…...

编程日记 2025/7/17 1:24:15

Pytest的Fixture使用

概述 Pytest中的Fixture可以使得测试代码高度复用，同时对资源进行安全的管理，以及在复杂的测试场景用进行灵活的组合。概念 Fixture：可重用的函数，用@pytest.fixture来进行装饰，用于为测试提供数据、环境或者服务作用域：控制Fixture的生命周期，默认是function，可设置…...

编程日记 2025/7/18 5:15:27

【蓝桥杯】每日练习 Day13

前言今天做了不少题，但是感觉都太水了，深思熟虑之下主播决定拿出两道相对不那么水的题来说一下（其实还是很水）。两道问题，一道是日期问题（模拟），一道是区间合并问题。日期差值 …...

编程日记 2025/7/18 9:13:10

Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽

Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽安装draggable npm install vuedraggablenext --save基础用法示例 <template><div class"app-container"><draggable v-model"list" item-key"id":group"…...

编程日记 2025/7/17 10:51:28

husky的简介以及如果想要放飞自我的解决方案

husky 是一个 Git Hooks 管理工具，它的主要作用是在 Git 提交（commit）、推送（push）等操作时执行自定义脚本，比如代码检查（Lint）、单元测试（Test）、格式化代码…...

编程日记 2025/7/20 22:28:57

Maven工具学习使用（四）——仓库

仓库分类对于Mavne来说，仓库只分为两类：本地仓库和远程仓库。当Maven根据坐标查询寻找构件的时候，它首先会查看本地仓库，如果本地仓库存在此构件，则直接使用；如果本地仓库不存在此构件，或者需要查看是否有更新的构件版本，Maven就会去远程仓库查找，发现需要的构件之后…...

编程日记 2025/7/19 22:37:40

【BFS】《单源、多源 BFS：图搜索算法的双生力量》

文章目录前言单源BFS例题一、迷宫中离入口最近的出口二、最小基因变化三、单词接龙四、为高尔夫比赛砍树多源BFS例题一、 01 矩阵二、飞地的数量三、地图中的最高点四、地图分析结语前言什么是单源、多源BFS算法问题呢？ BFS（Breadth - First Sear…...

编程日记 2025/7/20 22:27:18

批量取消 PDF 文档中的所有超链接

在 PDF 文档中我们可以插入各种各样的文本也可以给文本设置字体，颜色等多种样式，同时还可以给文字或者图片添加上超链接，当我们点击超链接之后，就会跳转到对应的网页。有时候这会对我们的阅读或者使用形成一定的干扰，今…...

编程日记 2025/7/15 1:34:46

13.2 kubelet containerRuntime接口定义和初始化

本节重点总结 ： containerRuntime 需要实现3类接口管理容器的接口管理镜像的接口Streaming API 用于客户端与容器进行交互 type KubeGenericRuntime interface {kubecontainer.Runtimekubecontainer.StreamingRuntimekubecontainer.CommandRunner }containerRun…...

编程日记 2025/7/16 5:25:34

使用 gone.WrapFunctionProvider 快速接入第三方服务

项目地址：https://github.com/gone-io/gone 本文中源代码： esexamples/es 文章目录 1. gone.WrapFunctionProvider 简介2. 配置注入实现3. 实战示例：Elasticsearch 集成4. 使用方式5. 最佳实践6. 总结在如何给Gone框架编写Goner组件&#xf…...

编程日记 2025/7/14 10:48:54

git 标签学习笔记

目录轻量级标签带注释的标签（推荐） 给指定 commit 打标签推送单个标签，需要单独推送，代码推送不会推送标签推送所有标签删除标签轻量级标签 git tag v1.0.0 只是简单地给当前 commit 打上 v1.0.0 标签。带注释的标…...

编程日记 2025/7/17 1:13:18

【论文阅读】基于思维链提示的大语言模型软件漏洞发现与修复方法研究

这篇文章来自于 Chain-of-Thought Prompting of Large Language Models for Discovering and Fixing Software Vulnerabilities 摘要软件安全漏洞在现代系统中呈现泛在化趋势，其引发的社会影响日益显著。尽管已有多种防御技术被提出，基于深度学习&…...

编程日记 2025/7/20 22:27:19

企业在人工智能创新与安全之间走钢丝

2025 年全球 AI/ML 工具使用量将激增，企业将 AI 融入运营之中，员工也将 AI 嵌入日常工作流程中。报告显示，企业对 AI/ML 工具的使用同比增长 3,000% 以上，凸显了各行各业迅速采用 AI 技术，以提升生产力、效率和创新水平…...

编程日记 2025/7/13 9:38:54

CSS动画

目录一、核心概念与语法 1. keyframes 关键帧 2. animation 属性二、动画调速函数（animation-timing-function） 1. 预设值 2. 贝塞尔曲线 3. 步进函数（steps()） 三、动画控制与交互 1. 暂停与恢复 2. JavaScript 控制…...

编程日记 2025/7/15 1:15:57

计算机视觉（CV）技术的优势和挑战

计算机视觉（CV）技术是人工智能领域中的一个重要分支，它主要通过让机器学会“看”和“理解”图像或视频来模拟人类视觉系统。以下是计算机视觉技术的一些优势和挑战： 优势： 自动化：计算机视觉技术可以实现…...

编程日记 2025/7/20 22:41:10

动态IP与静态IP该如何选？

一、当IP地址成为"网络身份" 2023年亚马逊封号潮中，某杭州卖家因登录IP频繁切换（早8点在纽约，午间瞬移到东京），触发平台风控导致账号冻结。这类"时空错乱症"揭示了跨境电商的生存法则&#xff1a…...

编程日记 2025/7/16 20:08:08

Vue.js 完全指南：从入门到精通

1. Vue.js 简介 1.1 什么是 Vue.js？ Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。所谓"渐进式"，意味着 Vue 的设计是由浅入深的，你可以根据自己的需求选择使用它的一部分或全部功能。 Vue 最初由尤雨溪（Evan You）在 2014 年创…...

编程日记 2025/7/16 15:45:46

《TypeScript 7天速成系列》第3天：TypeScript高级类型通关秘籍：泛型+联合+交叉类型实战

TypeScript 的类型系统是其最强大的特性之一，但也是许多开发者感到困惑的地方。今天我们就来破解 TypeScript 中最难的类型系统，掌握泛型、联合类型和交叉类型的使用技巧。一、泛型函数与泛型接口泛型是 TypeScript 中创建可重用组件的重要工具&…...

编程日记 2025/7/20 22:39:08

Python----数据分析（足球运动员数据分析）

一、数据展示 1.1、数据 1.2、列名字段名备注Name姓名Nationality国籍National_Position国家队位置National_Kit国家队号码Club所在俱乐部Club_Position所在俱乐部位置Club_Kit俱乐部号码Club_Joining加入俱乐部时间Contract_Expiry合同到期时间Rating评分Height身高Weight体…...

编程日记 2025/7/15 5:58:42

音视频三看书的笔记 MediaPlayer的C/S架构

MediaPlayer在运行时分为Client和Server两部分 Client层‌：位于Java层，用户通过调用Java层的API（如setDataSource）来操作MediaPlayer。 Server层‌：位于C层，负责实际的媒体处理工作。Server层通过Binder机…...

编程日记 2025/7/20 22:24:35

Elasticsearch：使用 AI SDK 和 Elastic 构建 AI 代理

作者：来自 Elastic Carly Richmond 你是否经常听到 AI 代理（AI agents）这个词，但不太确定它们是什么，或者如何在 TypeScript（或 JavaScript）中构建一个？跟我一起深入了解 AI 代理的概…...

编程日记 2025/7/19 1:06:52

echarts添加坐标轴点击事件

echarts添加坐标轴点击事件 chart.on(click, (params) > {if(params.componentType yAxis && this.type ! 1){console.log(params);// 检查是否点击了系列数据console.log(你点击了 ${params.name} 的数据点，值为 ${params.value}); this.$bus.$emi…...

编程日记 2025/7/18 8:46:11

如何在linux中部署dns服务主备dns （详细全过程）

环境centos 7.9 主DNS：192.168.60.131 备DNS：192.168.60.134 我以 chenxingyu0.com 指向 192.168.60.200为例首先是主dns #!/bin/bash# 检查是否为 root 用户 if [ "$(id -u)" ! "0" ]; thenecho "请使用…...

编程日记 2025/7/20 7:04:46

GitLab 中文版17.10正式发布，27项重点功能解读【二】

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...

编程日记 2025/7/20 22:32:21

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图（Nightingale Rose Chart），是一种特殊形式的柱状图，它以南丁格尔（Florence Nightingale）命名，她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。它将数据绘制在极坐…...

编程日记 2025/7/16 19:50:19

WPF 与 C# 融合开发：从基础到高级应用（一）

WPF 与 C# 融合开发：从基础到高级应用一、C# 语言基础回顾 1.1 C# 语言概述 C# 是微软开发的一种现代、面向对象的编程语言，它融合了 C、C 和 Java 等语言的优点，具有简洁、安全、高效等特点。C# 广泛应用于 Windows 平台的应用开发&…...

编程日记 2025/7/16 19:52:23

ref和reactive区别

在 Vue 3 中，ref 和 reactive 是两种创建响应式数据的主要 API，但它们的适用场景和使用方式有所不同。以下是它们的核心区别和示例： 一、核心区别特性refreactive适用数据类型所有类型（基本类型、对象、数组）仅对象或…...

编程日记 2025/7/10 11:28:56

精选10个好用的WordPress免费主题

10个好用的WordPress免费主题 1. Astra Astra 是全球最受欢迎的 WordPress 主题。它功能丰富，易于使用，SEO友好，是第一个安装量突破100万的非默认主题，并获得了5000多个五星好评。它完美集成了Elementor、Beaver，古…...

编程日记 2025/7/17 4:46:41

DerpNStink: 1靶场渗透

DerpNStink: 1 来自 <DerpNStink: 1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.213 3，对靶机进行端…...

编程日记 2025/7/20 18:44:39

apache安装脚本使用shell建立

注意防火墙，yum，网络连接等以下是具体的apache安装脚本 #!/bin/bash # Set Apache version to install ## author: yuan # 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; …...

编程日记 2025/7/18 4:49:05

Azure SDK 使用指南

Azure SDK（软件开发工具包）是一组由微软提供的工具和库，旨在帮助开发者以多种编程语言（如 .NET、Java、Python、JavaScript 等）与 Azure 服务进行交互。通过使用 Azure SDK，开发者可以更高效地构建、部…...

编程日记 2025/7/20 16:21:12

DeepSeek-V3-0324 版本升级概要

DeepSeek-V3-0324 魔搭社区汇聚各领域最先进的机器学习模型，提供模型探索体验、推理、训练、部署和应用的一站式服务。https://modelscope.cn/models/deepseek-ai/DeepSeek-V3-0324 发布背景与改进根DeepSeek-V3-0324 展示了以下关键改进： 推理性能提…...

编程日记 2025/7/11 1:13:51

leetcode 150. 逆波兰表达式求值

150. 逆波兰表达式求值 - 力扣（LeetCode） class Solution:def evalRPN(self, tokens: List[str]) -> int:stack[]for item in tokens:if item not in ( ,-,* , / ):stack.append(item)else:preint(stack.pop())pre_beforeint(stack.pop())sign itemi…...

编程日记 2025/7/15 11:38:20

LangChain4j与DashScope深度集成实战：一站式开发指南

本篇文章会通篇详细的讲清楚LangChain4j与DashScope集成的各个方面，从Springboot的集成到Ai对话、会话记忆、RAG、FunctionCalling、互联网搜索、结构化的输出、多模态等都给出相应的说明，希望通过这篇文章对于LLM不了解的同仁一样可以扩展出自己的AI应用…...

编程日记 2025/7/19 11:39:12

逼用户升级Win11，微软开始给Win10限速

随着Windows10的支持时间越来越短，微软也加大了对Win10用户的驱赶力度。最近，微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。这将影响实时协作和多设备访问。对OneNote…...

编程日记 2025/7/20 5:49:08

工作流引擎Flowable介绍及SpringBoot整合使用实例

Flowable简介 Flowable 是一个轻量级的业务流程管理（BPM）和工作流引擎，基于 Activiti 项目发展而来，专注于提供高性能、可扩展的工作流解决方案。它主要用于企业级应用中的流程自动化、任务管理和审批流等场景。 Flowable 的核心…...

编程日记 2025/7/16 11:44:51

【R语言可视化】相关系数热图

目录热图无显著性结果展示01： 热图显著性结果展示02： ggplot2绘制三角热图结果展示03： corrplot绘制三角热图结果展示04: 热图无显著性 # 示例数据 data(mtcars) df <- mtcars# 计算相关矩阵 cor_matrix <- round(cor(df…...

编程日记 2025/7/19 18:23:33