vue实现延时触发watch

使用 setTimeout 实现延时触发 watch

在 Vue 中，可以通过 setTimeout 在 watch 中实现延时触发逻辑。这种方法适用于需要在数据变化后延迟执行某些操作的场景。

watch: {
  targetValue(newVal, oldVal) {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    this.timeoutId = setTimeout(() => {
      // 延时执行的逻辑
      console.log('延时触发:', newVal);
    }, 500); // 延迟 500 毫秒
  }
}

使用 lodash.debounce 实现防抖

通过 lodash 的 debounce 方法可以更简洁地实现延时触发，避免手动管理定时器。

import { debounce } from 'lodash';

export default {
  data() {
    return {
      targetValue: ''
    };
  },
  watch: {
    targetValue: debounce(function(newVal) {
      // 延时执行的逻辑
      console.log('防抖触发:', newVal);
    }, 500) // 延迟 500 毫秒
  }
};

使用 watch + computed 结合实现延时

如果需要更复杂的逻辑，可以结合 computed 和 watch 实现延时触发。

export default {
  data() {
    return {
      targetValue: '',
      delayedValue: ''
    };
  },
  computed: {
    computedValue() {
      return this.targetValue;
    }
  },
  watch: {
    computedValue(newVal) {
      setTimeout(() => {
        this.delayedValue = newVal;
        console.log('延时更新:', this.delayedValue);
      }, 500);
    }
  }
};

使用自定义指令实现延时触发

如果需要复用延时逻辑，可以封装为自定义指令。

Vue.directive('delay', {
  bind(el, binding) {
    let timeoutId = null;
    el.addEventListener('input', () => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      timeoutId = setTimeout(() => {
        binding.value(el.value);
      }, binding.arg || 500);
    });
  }
});

// 使用方式
<input v-delay="handleDelayedInput" v-model="inputValue" />

注意事项

• 清除定时器：使用 setTimeout 时，务必在组件销毁前清除未执行的定时器，避免内存泄漏。
• 防抖与节流：根据场景选择防抖（debounce）或节流（throttle），防抖适用于频繁触发但只需最后一次结果的场景。
• 性能优化：对于高频数据变化（如输入框输入），建议使用防抖或节流减少不必要的计算或请求。