Vue3 错误边界处理的示例代码

在 Vue3 应用开发中，有效地处理错误是提升应用稳定性和用户体验的关键。错误边界（Error Boundaries）为我们提供了一种优雅的方式来捕获和处理组件内的错误，避免整个应用的崩溃。下面将通过示例代码来详细介绍 Vue3 中的错误边界处理。

创建一个错误边界组件 ErrorBoundary.vue：

<template>
  <div>
    <h2>出现错误了！</h2>
    <p>{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorMessage: '',
    };
  },
  errorCaptured(err, instance, info) {
    this.errorMessage = err.message;
  },
};
</script>

在上述代码中，errorCaptured 钩子函数用于捕获子组件的错误，并将错误信息存储在 errorMessage 中进行展示。

接下来，在应用的其他组件中使用这个错误边界组件。例如，在 ChildComponent.vue 中：

<template>
  <div>
    <button @click="handleClick">点击我（可能出错）</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      throw new Error('这是一个测试错误！');
    },
  },
};
</script>

然后，在父组件中引入并使用错误边界组件和可能出错的子组件：

<template>
  <div>
    <ErrorBoundary>
      <ChildComponent />
    </ErrorBoundary>
  </div>
</template>

<script>
import ErrorBoundary from './ErrorBoundary.vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ErrorBoundary,
    ChildComponent,
  },
};
</script>

通过这样的方式，当 ChildComponent 中抛出错误时，错误会被 ErrorBoundary 组件捕获并进行相应的处理，而不会导致整个应用崩溃。错误边界处理能够增强应用的健壮性，为用户提供更友好的错误提示和更稳定的使用体验。

在实际开发中，根据具体的业务需求，可以进一步优化错误边界的处理逻辑，比如记录错误日志、向服务器发送错误报告等。合理地使用错误边界可以让我们更从容地应对各种意外情况，确保应用的正常运行。