Vue 'errorCaptured' 生命周期钩子
示例
使用 errorCaptured 生命周期钩子捕获来自子组件的错误，并向用户显示警报。
<script>
export default {
errorCaptured() {
alert("An error occurred");
}
}
</script>
查看下方更多示例。
定义和用法
当子/后代组件中发生错误时，将调用 errorCaptured 生命周期钩子。
此钩子可用于错误处理、记录错误或将错误显示给用户。
使用 errorCaptured 钩子时，重要的是不要触发发生错误的组件的渲染，因为这很可能会导致无限循环。
有关错误的信息可作为 errorCaptured() 函数中的三个参数提供给我们
- 错误
- 触发错误的组件
- 错误源类型
发生错误的默认行为是传播或“冒泡”，从发生错误的组件开始。在组件中发生的错误将向上移动到父组件，并继续向上移动，最终以控制台中的错误消息结束。
通过在 errorCaptured() 函数内部运行 return false;，错误将不会出现在父组件中（停止传播），并且错误也不会以控制台中的错误消息结束。
还可以使用 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 教程：Vue 生命周期钩子
Vue 教程：‘errorCaptured’ 钩子
