（二十六）组件错误处理

<template>
  <ul>
    <AppListItem v-for="item in data">{{ item }}</AppListItem>
  </ul>
</template>
<script>
import AppListItem from "./AppListItem.vue";
export default {
  props: ["data"],
  components: {
    AppListItem,
  },
  mounted() {
    // 自定义一个未捕获的错误
    throw new Error("发生了异常");
  },
};
</script>
<style scoped></style>

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.config.errorHandler = (err, vm, info) => {
  console.log(err)    // 错误信息
  console.log(vm)     // vue 实例
  console.log(info)   // 错误位置
}

app.mount("#app");

<template>
  <li><slot></slot></li>
</template>
<script>
export default {
  mounted() {
    throw new Error("AppListItem 组件异常");
  },
};
</script>
<style scoped></style>

<template>
  <p v-if="error">啊哦，出错了！</p>
  <ul v-else>
    <AppListItem v-for="item in data">{{ item }}</AppListItem>
  </ul>
</template>
<script>
import AppListItem from "./AppListItem.vue";
export default {
  props: ["data"],
  data() {
    return {
      error: false,
    };
  },
  components: {
    AppListItem,
  },

  // 错误处理生命周期
  errorCaptured(err, instance, info) {
    console.log(err)          // 错误信息
    console.log(instance)     // 组件的实例
    console.log(info);        // 错误位置

    // 出错了通过错误DOM元素向用户说出错了
    this.error = true;
    // 停止错误事件错误向上传递
    return false;
  },
};
</script>
<style scoped></style>