Vue常见异常处理技巧

常见5中Vue异常报错处理

常见错误

第一种：引用一个不能存在的变量：

<div id="app" v-cloak>
  Hello, {
  {text}}
</div

上述代码运行后不会抛出错误，但是在控制台会有[Vue warn]消息。

第二种：将变量绑定到一个被计算出来的属性，计算的时候会抛出异常。

<div id="app" v-cloak>
  Hello, {
  {text2}}
</div>

<script>
const app = new Vue({
  el:'#app',
  computed:{
    name2() {
      return x;
    }
  }
})
</script>

运行上述代码会在控制台抛出一个[Vue warn]和一个常规的错误，网页白屏。

第三种：执行一个会抛出异常的方法

<div id="app" v-cloak>
	<button @click="doIt">Do It</button>
</div>

<script>
const app = new Vue({
  el:'#app',
  methods:{
	  doIt() {
		  return x;
	  }
  }
})
</script>

这个错误在控制台也[Vue warn]和常规报错。和上一个错误的区别在于，只有你点击了按钮才会触发函数调用，才会报错。
上述这几个错误是Vue常见的异常抛出，但是在官方文档中我们很少能看到有具体的解决方式，有的仅仅只是一个简单的说明
《---------------------
如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentryÿ