Vue 中的错误处理

Question

Vue 实例有一个 errorCaptured钩子 时 Vue 调用的 抛出错误 。 例如，下面的代码将增加一个计数器，因为子组件 test每次单击按钮时都会引发错误。

  Vue.component('test', {
  template: '<button v-on:click="notAMethod()">Throw</button>'
});

const app = new Vue({
  data: () => ({ count: 0 }),
  errorCaptured: function(err) {
    console.log('Caught error', err.message);
    ++this.count;
    return false;
  },
  template: `
  <div>
    <span>{{count}}</span>
    <test></test>
  </div>
  `
});

errorCaptured 仅捕获嵌套组件中的错误

一个常见的问题是 Vue 不 调用 errorCaptured当错误发生在与 errorCaptured挂钩已注册。 例如，如果您从上面的示例中删除 测试 组件并内联 button在顶层 Vue 实例中，Vue 不会 调用 errorCaptured。

  const app = new Vue({
  data: () => ({ count: 0 }),
  // Vue won't call this hook, because the error occurs in this Vue
  // instance, not a child component.
  errorCaptured: function(err) {
    console.log('Caught error', err.message);
    ++this.count;
    return false;
  },
  template: `
  <div>
    <span>{{count}}</span>
    <button v-on:click="notAMethod()">Throw</button>
  </div>
  `
});

异步错误

从好的方面来说，Vue 确实调用了 errorCaptured()当异步函数抛出错误时。 例如，如果子组件异步抛出错误，Vue 仍然会将错误冒泡给父组件。

  Vue.component('test', {
  methods: {
    // Vue bubbles up async errors to the parent's `errorCaptured()`, so
    // every time you click on the button, Vue will call the `errorCaptured()`
    // hook with `err.message = 'Oops'`
    test: async function test() {
      await new Promise(resolve => setTimeout(resolve, 50));
      throw new Error('Oops!');
    }
  },
  template: '<button v-on:click="test()">Throw</button>'
});

const app = new Vue({
  data: () => ({ count: 0 }),
  errorCaptured: function(err) {
    console.log('Caught error', err.message);
    ++this.count;
    return false;
  },
  template: `
  <div>
    <span>{{count}}</span>
    <test></test>
  </div>
  `
});

错误传播

你可能已经注意到 return false 前面示例中的行。 如果你的 errorCaptured() 函数不返回 false，Vue 会将错误冒泡到父组件' errorCaptured()：

  Vue.component('level2', {
  template: '<button v-on:click="notAMethod()">Throw</button>'
});

Vue.component('level1', {
  errorCaptured: function(err) {
    console.log('Level 1 error', err.message);
  },
  template: '<level2></level2>'
});

const app = new Vue({
  data: () => ({ count: 0 }),
  errorCaptured: function(err) {
    // Since the level1 component's `errorCaptured()` didn't return `false`,
    // Vue will bubble up the error.
    console.log('Caught top-level error', err.message);
    ++this.count;
    return false;
  },
  template: `
  <div>
    <span>{{count}}</span>
    <level1></level1>
  </div>
  `
});

另一方面，如果您的 errorCaptured() 函数返回 false，Vue 将停止传播该错误：

  Vue.component('level2', {
  template: '<button v-on:click="notAMethod()">Throw</button>'
});

Vue.component('level1', {
  errorCaptured: function(err) {
    console.log('Level 1 error', err.message);
    return false;
  },
  template: '<level2></level2>'
});

const app = new Vue({
  data: () => ({ count: 0 }),
  errorCaptured: function(err) {
    // Since the level1 component's `errorCaptured()` returned `false`,
    // Vue won't call this function.
    console.log('Caught top-level error', err.message);
    ++this.count;
    return false;
  },
  template: `
  <div>
    <span>{{count}}</span>
    <level1></level1>
  </div>
  `
});