Vue组件渲染无限循环问题分析及优化方案探讨

场景复现 #

我已经解决了这个无限循环问题，但对背后的成因仍有疑惑，特此梳理分析。我开发了一个错误处理插件，相关代码如下：

main.js

const bugStore = {
  state: [],
  addToState(bug) {
    this.state.push(bug);
  }
};

const ErrorLoggerPlugin = {
  install(Vue) {
    const app = new Vue({
      data: {
        bugStore: bugStore
      },
      methods: {
        bug(bug) {
          // 防止组件重新渲染的必要操作
          //setTimeout(() => {
          this.bugStore.addToState(bug);
          //});
        }
      }
    });
    Vue.prototype.$bug = app.bug;
    
  }
};

Vue.use(ErrorLoggerPlugin);

new Vue({
  el: "#app",
  components: {
    App
  },
  template: "<App/>",
  render: (h) => h(App)
});

App.vue

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    {{ $injector("hello world") }}
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    $injector(val) {
      try {
        breakme();
      } catch {
        this.$bug("anything");
      }
      return val;
    },
  },
};
</script>

上述代码会导致App.vue的渲染函数陷入无限循环。我清楚模板中应避免调用方法，但想明确触发组件重新渲染的具体原因。取消main.js中setTimeout的注释即可解决问题——因为setTimeout会让方法先返回值，再执行错误处理插件的后续逻辑。

推测与验证过程 #

我初步推测：模板调用方法时，会在当前调用栈中创建通知依赖，导致组件对插件store的状态产生响应式绑定；而用setTimeout包裹后，相关依赖逻辑会在当前调用栈清空后才执行，从而避免了循环触发。

我做了以下验证：

• 尝试用函数式组件替代原有方法，仍出现相同的无限循环问题；
• 按照建议移除插件中的new Vue，但由于应用其他部分需要响应式，我将bug store的状态引用到对应组件自身的data属性中，问题得以解决。

结论 #

除非使用v-once指定，否则组件渲染过程中涉及的所有内容都会生成通知/依赖树。若方法修改了某个状态，即便该状态看似与当前组件无关，组件也会因状态变化触发重新渲染。

内容的提问来源于stack exchange，提问作者user1447679