Vue 错误处理 — onErrorCaptured 钩子

本文已整理到 blog。

如果我的内容帮助到了您，欢迎点个 Star 鼓励鼓励 :) ~~

---

Vue 实例有一个 onErrorCaptured 钩子，每当事件处理程序或生命周期钩子抛出错误时，Vue 会调用该钩子。

例如，下面的代码将增加一个计数器，每次单击按钮时，组件 test 都会抛出一个错误。

test.vue：

onErrorCaptured 只捕获嵌套组件中的错误

一个常见的问题是，当错误发生在注册 onErrorCaptured 钩子的同一组件中时，Vue 不会调用 onErrorCaptured。

例如，如果从上述示例中删除 test 组件，并将按钮内联到顶级 Vue 实例中，Vue 将不会调用 onErrorCaptured。

异步错误

好的一面是，当异步函数抛出错误时，Vue 会调用 errorCapture()。

例如，如果子组件异步抛出错误，Vue 仍然会将错误冒泡给父组件。

test.vue：

错误传播

在前面的示例中，您可能已经注意到 return false。如果 onErrorCaptured() 函数没有 return false，则 Vue 会将错误冒泡到父组件的 onErrorCaptured()：

test1.vue：

test2.vue：

错误传播

另一方面，如果 onErrorCaptured() 方法使用 return false，Vue 将停止该错误的传播：

// test2.vue
onErrorCaptured(err => {
  console.log('test 1 error', err.message)
  return false
})