Vue.js 3如何避免监听器（watcher）自触发？

方法1：在监听器中判断值是否需要更新 #

通过判断新值和目标值是否一致，仅在值确实需要改变时才赋值，避免无意义的赋值触发监听器。

const page = ref(1);
const pageCount = 10;

watch(page, (newVal) => {
  const targetVal = Math.min(newVal, pageCount);
  // 只有当值发生变化时才执行赋值
  if (newVal !== targetVal) {
    page.value = targetVal;
  }
});

这种方式下，当page.value被设为11时，监听器触发并将值改为10；此时page的值从11变为10，会再次触发监听器，但因为新值10和目标值10一致，不会执行赋值，因此不会产生额外的副作用。

方法2：使用标记变量阻止递归触发 #

通过设置一个临时标记，在监听器执行赋值操作时跳过后续的递归触发：

const page = ref(1);
const pageCount = 10;
let isUpdating = false;

watch(page, (newVal) => {
  // 如果正在更新，直接返回
  if (isUpdating) return;
  
  isUpdating = true;
  page.value = Math.min(newVal, pageCount);
  isUpdating = false;
}, { flush: 'sync' });

这里设置flush: 'sync'确保赋值操作立即生效，标记isUpdating会在赋值期间阻止监听器再次执行，彻底避免递归触发。

方法3：使用计算属性替代监听器（更优雅的方案） #

将值的约束逻辑放在计算属性的setter中，完全避免使用监听器：

const _page = ref(1);
const pageCount = 10;

// 对外暴露的page是带约束的计算属性
const page = computed({
  get() {
    return _page.value;
  },
  set(val) {
    // 直接在setter中处理值的约束
    _page.value = Math.min(val, pageCount);
  }
});

当你设置page.value = 11时，内部会自动将值修正为10，无需监听，从根源上避免了监听器自触发的问题。

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