vue v html bug,Vue.js中的5种错误处理方法

Vue是一套用于构建用户界面的渐进式JavaScript框架。在我们使用vue时通常会遇到各种错误，本文就来为大家介绍vue中5种错误处理的方法。

几种错误：

为了测试各种错误处理技术，下面介绍三种不同的错误类型(最初无论如何)。

1、引用一个不存在的变量：

Hello, {{name}}

此示例不会向用户显示错误，但[Vue warn]控制台中将显示一条消息。

可以在此处查看此示例：

2、将变量绑定到一个被计算出来的属性，运行时此变量将抛出错误。

Hello, {{name2}}

const app = new Vue({

el:'#app',

computed:{

name2() {

return x;

}

}

})

这会在控制台中抛出[Vue warn]和常规错误，并且不会向用户显示任何内容。

实例代码如下：

3、执行一个会抛出异常的方法

Do It

const app = new Vue({

el:'#app',

methods:{

doIt() {

return x;

}

}

})

这个错误将在控制台中抛出两次，一个警告和一个常规的错误。与上次不同，只有在实际单击按钮时才会引发错误。

实例代码：

注：上面3个例子并不代表所有类型的错误。这3种是比较常见的错误。

Vue中异常处理包含以下几个方面的技巧：errorHandler

warnHandler

renderError

errorCaptured

window.onerror(不是Vue特定的技术)

vue异常处理方法介绍：

这是Vue.js应用程序的通用错误处理程序。Vue.config.errorHandler = function(err, vm, info) {

}

err是实际的错误对象，info是Vue特定的错误字符串，vm是实际的Vue应用程序。

此错误处理程序将适用于所有这些错误处理程序。

示例：Vue.config.errorHandler = function(err, vm, info) {

console.log(`Error: ${err.toString()}\nInfo: ${info}`);

}

第一种错误不会触发errorHandler，它只是一个warning。

第二种错误会抛出错误被errorHandler捕获：Error: ReferenceError: x is not defined

Info: render

最后，第三个错误给出以下结果：Error: ReferenceError: x is not defined

Info: v-on handler

warnHandler处理Vue warnings。但请注意，在生产过程中会忽略此处理程序。方法处理程序也略有不同：Vue.config.warnHandler = function(msg, vm, trace) {

}

trace代表了组件树。

示例：Vue.config.warnHandler = function(msg, vm, trace) {

console.log(`Warn: ${msg}\nTrace: ${trace}`);

}

第一个错误被warnHandler捕获：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 )

第二和第三示例保持不变。您可以在下面查看三个实例：

和前面两个不同，这个技巧不适用于全局，和组件相关。并且只适用于非生产环境。

下面是一个简单的例子：const app = new Vue({

el:'#app',

renderError (h, err) {

return h('pre', { style: { color: 'red' }}, err.stack)

}

})

若第一个错误使用了这种方法是没有效果的，因为第一个错误是警告，而不是错误。如果在计算属性引发错误的第二个示例中对其进行测试，则会呈现该错误。

示例：

文档中对此方法的介绍：当捕获到任何后代组件的错误时调用。 该挂钩接收三个参数：错误，触发错误的组件实例以及包含有关捕获错误的位置信息的字符串。 挂钩可以返回false，以阻止错误进一步传播。

基于我的一些分析，这个error Handler只能在父组件中处理子组件的错误。据我所知，我们没法直接在Vue的主实例(main instance)中使用它。

为了对此进行测试，我创建了一组父/子组件，如下所示：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

}

}

});

请注意该kitten组件中有一个错误。现在，如果我尝试像这样使用它：

捕获的信息如下:cat EC: TypeError: dontexist is not a function

info: render

可以在下面的示例中查看：

它是一个全局的异常处理函数，可以抓取所有的JavaScript异常。

处理程序采用以下形式：window.onerror = function(message, source, line, column, error) {

}

source：当前脚本的url。

如果你定义了onerror，但是没有启用Vue.config.errorHandler，那么有很多异常都抓不到。Vue希望你要定义它，否则异常不会抛出去的。

如果定义errorHandler的代码有BUG，那么运行起来也不会被onerror抓到。下面的例子中，如果将oopsIDidItAgain()解注释，你就会发现这个问题。只有第二个按钮没有和Vue绑定，所以报错无论如何都会被抓到。