vue抓取页面_5种处理Vue异常的方法

• 原文: Handling Errors in Vue.js
• 译者: Fundebug

本文采用意译，版权归原作者所有

去年一整年，我都在使用最爱的—Vue.js— 来做项目。最近突然意识到，我竟然从来没有认真去处理异常。我可以自恋地说："我写的代码是完美的，没有 BUG。" 我相信大家都明白这是迷之自信。最近，我花了不少时间研究了 Vue 中处理异常的各种技巧，在此想把我学到的分享给大家。

错误大全

为了测试各种异常处理技巧，我故意触发三种类型的错误。

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

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

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

你可以在 Codepen 查看例子完整代码:

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

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

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

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

你可以在 Codepen 查看例子完整代码:

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