在 Vue 应用中，当组件内部发生错误导致程序崩溃时，是非常难以调试和处理的。为了解决这个问题，Vue 2.0 引入了错误边界处理的概念，允许你处理子组件的错误而不影响整个应用的状态。
错误边界的基本使用
错误边界是通过 errorCaptured 钩子函数来实现的。这个钩子函数在子组件抛出未被捕获的异常时被调用。你可以在错误边界组件中添加这个钩子函数来捕获错误并进行处理。
----------
-----
-------------
----------------
---------------- --
-----------------
------
-----------
--------
------ ------- -
----------- -
-------------
--
----- -- -- --
--------- -----
---
-------- -
---------------- --- ----- -
------------- - ----
---------------- --- -----
-
-
-
---------
---- ----------------- ---
----------
---- ----------------
-------------
----- ----- ------
------
---- -------
-------------
------
-----------
--------
------ ------- -
----- -- -- --
------ ----
---
-------- -
---------------- --- ----- -
---------- - --------------
--------------------- ---- --- -----
-
-
-
---------在上面的例子中，我们创建了一个错误边界组件 ErrorBoundary，包裹了一个可能会抛出错误的子组件 ChildComponent。当子组件抛出错误时，ErrorBoundary 组件会捕获到这个错误，将 hasError 属性设为 true，展示错误信息。而如果子组件没有抛出错误，ErrorBoundary 会简单地渲染出子组件的内容。
错误边界的高级用法
除了基本使用外，错误边界还有一些高级用法，可以更好地优化和处理错误。
errorCaptured 钩子函数的细节
errorCaptured 钩子函数的参数包括三个：
error：捕获到的错误对象vm：抛出错误的组件实例info：错误堆栈信息
你可以在 errorCaptured 钩子函数中判断错误是否需要被处理，如果需要，可以做以下处理：
- 提供一个备用界面，例如一个“加载失败”的图片或文字
- 记录错误日志，以便更好地调试和排除错误
- 发送错误报告，通知开发人员处理错误
支持多个错误边界
你可以在同一组件中使用多个错误边界，通过给每个边界组件传递一个数组特定的 key 属性，来实现分别捕获不同子组件的错误。
----------
-----
--------------- ----------------
----------------- --
-----------------
--------------- ----------------
----------------- --
-----------------
------
-----------禁用子组件错误的传递
你可以在定义子组件时，通过 inheritAttrs 属性禁用组件的错误传递。
-------------------------------- - ------------- ----- -- --- --
这样的话，子组件的错误仅限于当前组件中，不会向父组件传递。
总结
在 Vue 应用中，错误边界是一个非常实用的工具，可以帮助我们更好地处理子组件的错误。不过要注意，过度使用错误边界可能会给应用带来性能开销，因此使用时需遵循合理性原则。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653631687d4982a6ebe1b865