Vue errorCaptured 生命周期挂钩

示例

使用errorCaptured生命周期钩子用于捕获子组件的错误并向用户创建警报。

<script>
export default {
  errorCaptured() {
    alert("An error occurred");
  }
}
</script>

运行示例 »

请参阅下面的更多示例。

定义和用法

这个errorCaptured当子/后代组件中发生错误时，将调用生命周期钩子。

该挂钩可用于错误处理、日志记录或向用户显示错误。

当使用errorCaptured钩子，重要的是不要触发错误来源的组件的渲染，因为这很可能会导致无限循环。

有关错误的信息可以作为三个参数提供给我们errorCaptured()功能：

错误
触发错误的组件
错误源类型

发生错误的默认行为是从发生错误的组件传播或“向上冒泡”。组件中发生的错误将向上移动到父组件，并继续向上移动，最终最终在控制台中显示为错误消息。

通过跑步return false;从里面errorCaptured()函数中，错误不会在父组件中结束（停止传播），并且错误也不会在控制台中作为错误消息结束。

错误处理也可以使用设置app.config.errorHandler功能。

更多示例

示例1

使用errorCaptured生命周期钩子用于捕获错误并将有关错误的信息写入控制台。

App.vue:

<template>
  <h1>The 'errorCaptured' Lifecycle Hook</h1>
  <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  <p>Open the browser console to see the captured error details.</p>
  <div>
    <comp-one></comp-one>
  </div>
</template>

<script>
export default {
  errorCaptured(error,compInst,errorInfo) {
    console.log("error: ", error);
    console.log("compInst: ", compInst);
    console.log("errorInfo: ", errorInfo);
  }
}
</script>

<style>
#app > div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgreen;
}
</style>

ComOne.vue:

<template>
  <h2>Component</h2>
  <p>This is the component</p>
  <button @click="generateError">Generate Error</button>
</template>

<script>
export default {
  methods: {
    generateError() {
      this.$refs.objEl.innerHTML = "hi";
    }
  }
}
</script>

运行示例 »

示例2

使用errorCaptured生命周期挂钩return false;以阻止错误传播。

App.vue:

<template>
  <h1>The 'errorCaptured' Lifecycle Hook</h1>
  <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  <p>Open the browser console to see the captured error details.</p>
  <div>
    <comp-one></comp-one>
  </div>
</template>

<script>
export default {
  errorCaptured(error,compInst,errorInfo) {
    console.log("error: ", error);
    console.log("compInst: ", compInst);
    console.log("errorInfo: ", errorInfo);
    return false;
  }
}
</script>

<style>
#app > div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgreen;
}
</style>

ComOne.vue:

<template>
  <h2>Component</h2>
  <p>This is the component</p>
  <button @click="generateError">Generate Error</button>
</template>

<script>
export default {
  methods: {
    generateError() {
      this.$refs.objEl.innerHTML = "hi";
    }
  }
}
</script>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue errorCaptured 生命周期挂钩

示例

定义和用法

更多示例

示例1

示例2

相关页面