错误大全

Hello, {{name}}

完整代码。

Hello, {{name2}}


完整代码。

Do It


完整代码。
Vue的文档中竟然没有介绍异常处理的章节。

  
warnHandler
  
window.onerror (不仅仅针对Vue)

Vue.config.errorHandler = function(err, vm, info) {
}
Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}
Error: ReferenceError: x is not defined
Info: render
Error: ReferenceError: x is not defined
Info: v-on handler

Vue.config.warnHandler = function(msg, vm, trace) {
}
Vue.config.warnHandler = function(msg, vm, trace) {
console.log(`Warn: ${msg}\nTrace: ${trace}`);
}
Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Trace:
(found in )例子1
例子2
例子3

const app = new Vue({
el:'#app',
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
})示例代码



当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
Vue.component('cat', {
template:`
Cat: 

`,
props:{
name:{
required:true,
type:String
}
},
errorCaptured(err,vm,info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
return false;
}
});
Vue.component('kitten', {
template:'
Kitten: {{ dontexist() }}
',
props:{
name:{
required:true,
type:String
}
}
});





cat EC: TypeError: dontexist is not a function
info: render运行实例。

终极技巧: window.onerror
window.onerror = function(message, source, line, column, error) {
}运行实例
总结

正如开篇提到，这是我第一次写关于这个主题的文章。我也希望从大家获得反馈，包括评论、建议以及修订意见。我希望大家可以分享自己如何使用的具体事例。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学php网。