vue 的 errorcaptured 鉤子可以捕獲子組件的錯誤，并在父組件中統(tǒng)一處理。1. 它能捕獲渲染函數(shù)、生命周期鉤子和 watcher 中的同步錯誤；2. 不會捕獲異步錯誤、promise rejection 和父組件自身的錯誤；3. 錯誤會從最近祖先逐級向上冒泡，返回 false 可阻止傳播；4. 建議結(jié)合 vue.config.errorhandler 實現(xiàn)全局錯誤兜底處理，從而構(gòu)建完整的前端錯誤監(jiān)控體系。
Vue 的 errorCaptured 鉤子可以用來捕獲子組件的錯誤，這個鉤子在 Vue 2 和 Vue 3 中都支持。它能捕捉到子組件渲染函數(shù)、生命周期鉤子以及 watcher 報出的錯誤，是調(diào)試和錯誤上報的一個重要手段。
errorCaptured 的基本用法
errorCaptured 是一個生命周期鉤子函數(shù)，定義在父組件中。當(dāng)其子組件拋出錯誤時，該鉤子會被觸發(fā)。它的參數(shù)包括錯誤對象、發(fā)生錯誤的組件實例，以及錯誤來源信息（比如哪個生命周期或事件）：
export default { errorCaptured(err, vm, info) { console.error('捕獲到錯誤:', err, info); // 可以在這里進行錯誤上報或者處理 return false; // 返回 false 可以阻止錯誤繼續(xù)向上傳播 } }
這個鉤子非常適合用于統(tǒng)一收集錯誤信息，特別是在大型項目中，可以避免每個組件單獨加 try-catch。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
哪些錯誤能被 errorCaptured 捕獲？
并不是所有錯誤都能被捕獲，主要支持以下幾種情況：
- 渲染函數(shù)中的錯誤（包括模板編譯錯誤）
- 生命周期鉤子函數(shù)內(nèi)的錯誤
- Watcher 回調(diào)中的錯誤
- 子組件內(nèi)部拋出的同步錯誤
但需要注意的是：
- 異步錯誤（如 setTimeout 內(nèi)部的錯誤）不會自動被捕獲
- Promise 鏈中的未處理 rejection 不會觸發(fā) errorCaptured
- 父組件自身的錯誤也不會通過 errorCaptured 被自己捕獲
如果你希望捕獲異步錯誤，可以在 window.onerror 或 Vue.config.errorHandler 中統(tǒng)一處理。
使用建議與注意事項
- 層級傳播機制：如果多個祖先組件都定義了 errorCaptured，錯誤會從最近的祖先開始逐級向上冒泡。你可以通過返回 false 來阻止繼續(xù)傳播。
- 不要濫用：雖然可以統(tǒng)一處理錯誤，但不建議在這個鉤子里做復(fù)雜的邏輯，尤其是不能保證穩(wěn)定性的操作，否則可能影響主流程。
- 結(jié)合全局錯誤處理使用：對于未被 errorCaptured 捕獲的錯誤，可以通過設(shè)置 Vue.config.errorHandler 來兜底。
舉個實際例子，你可以在 main.JS 中設(shè)置全局錯誤處理器：
Vue.config.errorHandler = function (err, vm, info) { console.error('全局錯誤處理:', err, info); // 上報服務(wù)器 };
這樣即使 errorCaptured 沒有覆蓋到的地方，也能統(tǒng)一記錄。
總結(jié)一下
errorCaptured 是一個非常實用的工具，尤其適合在嵌套結(jié)構(gòu)中統(tǒng)一捕獲子組件錯誤。只要注意哪些錯誤能被它捕獲，再配合全局的 errorHandler，就能建立起比較完整的前端錯誤監(jiān)控體系。基本上就這些，不復(fù)雜但容易忽略細(xì)節(jié)。
