Options API 怎么在组件内使用 errorCaptured 捕获子孙组件的运行时错误-Vue.js-PHP中文网

errorcaptured 是 options api 中父组件捕获子孙组件运行时错误的钩子，可捕获子组件渲染、生命周期、watch 等异步/响应式错误，但不捕获自身 setup 同步错误；需在组件选项中声明，接收 err、instance、info 三参数，返回 false 可阻止冒泡。

options api 怎么在组件内使用 errorcaptured 捕获子孙组件的运行时错误

errorCaptured 是 Options API 中用于在父组件中捕获子孙组件（包括直接子组件、深层嵌套子组件）抛出的运行时错误的生命周期钩子。它不会捕获组件自身的 setup 或 mounted 等钩子中同步抛出的错误（这类错误需靠 try/catch 或全局 errorHandler），但能捕获子组件渲染、生命周期钩子（如 mounted、updated）、响应式副作用（如 watch 回调）中抛出的错误。

如何声明和触发 errorCaptured

在使用 Options API 的组件中，直接在组件选项对象中定义 errorCaptured 函数：

函数接收三个参数：err（Error 实例）、instance（发生错误的子组件实例）、info（错误来源的 Vue 特定信息，如 "render function"、"v-on handler"、"watcher getter" 等）
函数返回 false 可阻止错误继续向上传播（即父组件的父组件不会收到该错误）；不返回或返回其他值（包括 undefined、true）则默认继续向上冒泡
该钩子本身若抛错，不会被自身捕获，但会触发全局 app.config.errorHandler

典型可捕获的错误场景

以下错误在子孙组件中发生时，会被父组件的 errorCaptured 捕获：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

子组件模板中执行 JS 表达式出错（如 {{ undefined.xxx }} 或调用未定义方法）
子组件 mounted() 中异步操作后 throw new Error()
子组件 watch 回调里执行失败（如 API 请求失败后手动 throw）
子组件自定义指令的 mounted 钩子中抛出异常

注意：组件 setup() 中顶层同步错误（如直接 throw）会导致组件创建失败，此时 errorCaptured 不会触发——这类错误只能由全局 errorHandler 捕获。

实际写法示例

父组件（Options API）：

export default {
  name: 'Parent',
  errorCaptured(err, instance, info) {
    console.error('捕获到子组件错误：', err)
    console.log('错误组件：', instance?.type?.name)
    console.log('错误类型：', info)

    // 可在此上报错误、展示 fallback UI、重置状态等
    // return false // 阻止冒泡（谨慎使用）
    return true
  },
  render() {
    return h('div', [
      h('h2', '父组件'),
      h(ChildComponent) // 子组件若出错，此处触发 errorCaptured
    ])
  }
}