v-calendar 3.0.3中update:pages事件重复触发问题咨询

问题原因 #

在update:pages事件中修改attributes会触发v-calendar组件的重新渲染，而组件重新渲染时又会再次触发update:pages事件，形成无限循环，导致控制台重复输出日志。

解决方案 #

方案1：添加触发控制标志位 #

通过标志位避免重复进入事件处理逻辑，阻断循环触发：

<template>
  <v-calendar :attributes="attributes" @update:pages="updatePages">
  </v-calendar>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
      attributes: [],
      isHandlingUpdate: false,
    };
  },
  methods: {
    updatePages() {
      if (this.isHandlingUpdate) return;
      
      this.isHandlingUpdate = true;
      this.counter++;
      console.log("update " + this.counter);
      this.attributes = [];
      
      // 组件更新完成后重置标志位，确保下次事件能正常触发
      this.$nextTick(() => {
        this.isHandlingUpdate = false;
      });
    },
  },
};
</script>

方案2：避免不必要的属性更新 #

判断attributes是否已经处于目标状态，仅当状态不同时执行更新，减少无效的组件渲染：

<template>
  <v-calendar :attributes="attributes" @update:pages="updatePages">
  </v-calendar>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
      attributes: [],
    };
  },
  methods: {
    updatePages() {
      // 仅当attributes非空时才执行重置操作
      if (this.attributes.length === 0) return;
      
      this.counter++;
      console.log("update " + this.counter);
      this.attributes = [];
    },
  },
};
</script>

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