面试题：Vue中侦听器处理副作用操作时如何避免无限循环

Question

在Vue中使用侦听器处理副作用操作时，很容易因为数据变化触发侦听器，而侦听器又修改数据形成无限循环。请描述一种避免这种情况发生的常见方法，并结合代码示例说明。

Answer 1

常见方法

在侦听器内部，通过设置一个标志变量，或者使用 if 条件判断，确保在特定条件下才执行修改数据的操作，避免不必要的数据变化从而导致无限循环。

代码示例

<template>
  <div>
    <input v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      flag: false
    };
  },
  watch: {
    inputValue(newValue, oldValue) {
      if (!this.flag) {
        this.flag = true;
        // 这里进行需要的副作用操作，例如修改另一个数据
        this.inputValue = newValue.toUpperCase();
        this.flag = false;
      }
    }
  }
};
</script>

在上述代码中，通过 flag 变量来控制数据修改操作，避免因侦听器修改数据再次触发侦听器形成无限循环。只有在 flag 为 false 时，才会执行数据修改操作，并在操作前后修改 flag 的值。