這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 Vue的5種處理Vue異常的方法 相信大家對Vue都不陌生。在使用Vue的時候也會遇到報錯，也會使用瀏覽器的F12 來查看報錯信息。但是你知道Vue是如何進行異常拋出的嗎？vue 是如何處理異常的呢？接下來和大家介紹介紹，Vue是如何處理 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
Vue的5種處理Vue異常的方法
相信大家對Vue都不陌生。在使用Vue的時候也會遇到報錯，也會使用瀏覽器的F12 來查看報錯信息。但是你知道Vue是如何進行異常拋出的嗎？vue 是如何處理異常的呢？接下來和大家介紹介紹，Vue是如何處理這幾種常見的報錯的。
先和大家說說常見的五種處理報錯的方法
Vue 中異常處理包含以下幾個方面：
- errorHandler
- warnHandler
- renderError
- errorCaptured
- window.onerror (不僅僅針對 Vue)
方法一：errorHandler
在main.js文件中添加，或者引入Vue
import Vue from 'vue'
Vue.config.errorHandler = function(err, vm, info) {
//do something
};
err指代 error 對象，info是一個 Vue 特有的字元串，vm指代 Vue 應用本身。記住在一個頁面你可以有多個 Vue 應用。這個 error Handler 作用到所有的應用。
方法二：warnHandler
warnHandler用來捕獲 Vue的warning。但是在生產環境是不起作用的。
import Vue from 'vue'
Vue.config.warnHandler = function(msg, vm, trace) {};
msg是報錯信息和vm是報錯的虛擬DOM，trace代表了組件樹。
方法三: renderError
和前面兩個不同，這個技巧不適用於全局，和組件相關。並且只適用於非生產環境
錯誤代碼:
<div>第二種錯誤 {{ b }}</div>
computed: {
b () {
return x;
}
},
示例： renderError (h, err) {
return h('pre', { style: { color: 'black' } }, err.stack)
}
方法四: errorCaptured
當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字元串。此鉤子可以返回
false以阻止該錯誤繼續向上傳播。
app.config.errorHandler = (err, vm info) => {
//do something
}
error是Error錯誤對象，vm是發生錯誤的組件實例的可訪問組件屬性，info是包含錯誤來源信息的字元串
方法五：window.onerror
特點：
- 可以監聽所有的JavaScript錯誤，也能監聽Vue組件的報錯，包括一些非同步錯誤
- 無法根據報錯識別Vue組件的詳細信息，也無法監聽已經被try/catch捕獲的錯誤
- 無法監聽資源載入失敗的報錯
window.onerror。它是一個全局的異常處理函數，可以抓取所有的 JavaScript 異常。如果函數返回true，則會阻止執行預設事件處理函數
window.onerror = function(message, source, line, column, error) {
//do something
};
message是錯誤信息,source是發生錯誤的資源，line是發生錯誤的行號，column是發生錯誤的列數 error是Error錯誤對象
在errorHandler的參數中err指代 error 對象，info是一個 Vue 特有的字元串，vm指代 Vue 應用本身。在一個頁面你可以有多個 Vue 應用。這個 error handler 可以作用到所有的應用。warning並不會觸發 errorHandler。只有拋出了錯誤才會觸發
第一種：引用一個不存在的變數：
在Vue中我們有時候會在編寫代碼時出現錯誤，在template中引用了未定義的變數，導致報異常，這種異常在控制台只會報[Vue warn]並不會報 ReferenceError
<div>第一種錯誤, {{ a }}</div>
使用warnHandler來抓取錯誤
Vue.config.warnHandler = function (msg, vm, trace) {
console.log(`錯誤: ${msg}\n錯誤對象: ${trace}`);
}
第二種：將變數綁定到一個被計算出來的屬性，計算的時候會拋出異常。
將變數綁定到一個被計算出來的屬性，計算的時候會拋出異常代碼會在控制台拋出一個[Vue warn]和一個常規的錯誤，網頁出現白屏
<div>第二種錯誤 {{ b }}</div>
computed: {
b () {
return x;
}
},
使用errorHandler捕捉錯誤
import Vue from 'vue'
Vue.config.errorHandler = function (err, vm, info) {
console.log(`錯誤: ${err.toString()}\n錯誤信息: ${info}`);
console.log(vm)
};
使用warnHandler來抓取錯誤
Vue.config.warnHandler = function (msg, vm, trace) {
console.log(`錯誤: ${msg}\n錯誤對象: ${trace}`);
}
第三種：執行一個會拋出異常的方法
這個錯誤在控制台也[Vue warn]和常規報錯。和上一個錯誤的區別在於，只有你點擊了按鈕才會觸發函數調用，才會報錯。
<button @click="test1">JS錯誤</button>
methods: {
test1 () {
return b
},
使用errorHandler捕捉錯誤
第三種錯誤信息也可以被捕獲，但是要在被點擊按鈕之後出現報錯之後才能被捕獲
import Vue from 'vue'
Vue.config.errorHandler = function (err, vm, info) {
console.log(`錯誤: ${err.toString()}\n錯誤信息: ${info}`);
console.log(vm)
};
使用warnHandler來抓取錯誤
Vue.config.warnHandler = function (msg, vm, trace) {
console.log(`錯誤: ${msg}\n錯誤對象: ${trace}`);
}
本文轉載於:
https://juejin.cn/post/7147594391752802335
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
