vue中5种处理Vuewarn异常的方法，解决Prop being mutated: “placement“

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

errorHandler

warnHandler

renderError

errorCaptured

window.onerror (不仅仅针对Vue)

技巧1：errorHandler

我们要学习的第一个技巧是errorHandler。你也许知道，这是Vue中最广泛使用的异常处理方式。

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

}

err指代error对象，info是一个Vue特有的字符串，vm指代Vue应用本身。记住在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。

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

记住info里面的信息也是非常有用的。

技巧2: warnHandler

warnHandler用来捕获Vue warning。记住在生产环境是不起作用的。

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

}

msg和vm都容易理解，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 )

你可以查看三个例子的实际运行情况:

第一个: 例子1

第二个: 例子2

第三个: 例子3

技巧3: renderError

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

下面是一个简单的例子：

const app = new Vue({

el:'#app',

renderError (h, err) {

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

}

})

第一个例子是没有效果的，因为只是一个warning。第二个例子就会在网页上显示具体的错误信息: 示例代码

老实说，我没觉得这个比直接看控制台好多少。但是，如果你们的QA团队或则测试对浏览器控制台不熟悉的话，这个还是蛮有用的。

技巧4: errorCaptured

errorCaptured是最后一个和Vue相关的技巧，这个技巧让我很迷惑，现在还是有点搞不明白。文档是这么介绍的：

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

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

解决Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “placement“问题

Vue.config.warnHandler  = function(err, vm, info) {
  if (err.indexOf("placement")<0){
    //该错误需要降版本，故屏蔽
    console.error(("[Vue warn]: " + err + info));
  }
}