Vue Academy · 课时

onErrorCaptured 生命周期钩子

Q: 「onErrorCaptured 生命周期钩子」这节课中我会学到什么？

捕获子组件中的错误，返回 false 停止传播，以及错误对象 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

捕获子组件中的错误，返回 false 停止传播，以及错误对象

onErrorCaptured 生命周期钩子 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

在组件中捕获错误

Vue 提供了 onErrorCaptured 生命周期钩子，用于捕获后代组件抛出的错误。它允许父组件拦截其子树中的失败。

钩子签名

onErrorCaptured 接收三个参数：错误、抛出错误的组件实例，以及描述错误发生位置的 info 字符串。

import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
  // handle it
});

err 参数

第一个参数是抛出的错误对象，通常是一个带有消息和堆栈的 Error 实例，您可以记录或显示它。

onErrorCaptured((err) => {
  console.error("Captured:", err.message);
});

instance 参数

第二个参数是引发错误的组件实例，可用于调试或为错误报告附加上下文。

onErrorCaptured((err, instance) => {
  console.log("From component:", instance);
});

info 参数

第三个参数是一个字符串，用于说明触发错误的生命周期或操作，例如“render function”、“setup function”或某个特定钩子。

onErrorCaptured((err, instance, info) => {
  console.log("Vue context:", info);
});

仅捕获子组件错误

需要特别注意的是，onErrorCaptured 捕获的是后代组件的错误，而不是组件自身 setup 或渲染过程中的错误。请将该钩子放在要保护的代码所在组件的祖先组件中。

停止传播

默认情况下，被捕获的错误仍会向上继续传播到祖先处理器和全局处理器。返回 false 可以阻止它继续传播。

onErrorCaptured((err) => {
  reportError(err);
  return false; // do not propagate
});

为什么要停止传播

返回 false 可以在本地截获错误；当该组件已经完整处理了失败（例如显示备用界面），且不希望全局处理器也被触发时，这很有用。

让错误继续冒泡

如果您希望更高层级的处理器（或全局处理器）也能看到该错误，请不要返回 false。这样，钩子会在本地记录错误，同时让错误继续向上传播。

onErrorCaptured((err) => {
  logLocally(err);
  // no return -> still propagates
});

实际应用

一种常见用法是记录错误并设置恢复标志。设置一个响应式标志，在报告错误以便诊断的同时渲染备用界面。

const failed = ref(false);
onErrorCaptured((err) => {
  failed.value = true;
  report(err);
  return false;
});

异步注意事项

onErrorCaptured 可以捕获后代组件渲染、生命周期和同步处理器中的错误。某些异步错误（未捕获的 Promise 拒绝）更适合在全局层级处理，稍后会介绍。

快速检查

从 onErrorCaptured 返回 false 会有什么作用？

回顾

您已经了解，onErrorCaptured((err, instance, info)) 会捕获后代组件的错误。info 字符串提供生命周期上下文，而返回 false 会停止传播，使组件能够在本地处理失败。

常见问题解答

「onErrorCaptured 生命周期钩子」课时是免费的吗？

是的 — 「onErrorCaptured 生命周期钩子」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「onErrorCaptured 生命周期钩子」这节课中我会学到什么？

捕获子组件中的错误，返回 false 停止传播，以及错误对象你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「onErrorCaptured 生命周期钩子」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy