vue3防抖节流

一、解决方案

在Vue 3项目中，当处理用户输入（如搜索框）、窗口调整大小或频繁触发的事件（如滚动）时，可能会导致性能问题。为了优化这些场景，我们可以使用防抖（Debounce）和节流（Throttle）技术来限制函数的执行频率。

二、实现思路与代码示例

1. 防抖（Debounce）

防抖的原理是：在事件被触发后，延迟指定时间再执行回调函数；如果在延迟时间内再次触发相同事件，则重新计时。

javascript
// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}</p>

<p>// 在Vue组件中使用
export default {
  setup() {
    const search = debounce((query) => {
      console.log('实际查询:', query)
    }, 500)</p>

<pre><code>return { search }

}
}

2. 节流（Throttle）

节流的原理是在一段时间内只允许执行一次函数，即使期间多次触发事件。

javascript
// 节流函数
function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = +new Date();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  }
}</p>

<p>// 使用示例
export default {
  mounted() {
    window.addEventListener('resize', throttle(this.handleResize, 1000))
  },
  methods: {
    handleResize() {
      console.log('窗口大小变化')
    }
  }
}

三、其他实现方式

1. 使用lodash库

Lodash提供了现成的debounce和throttle方法，使用更加方便：

javascript
import _ from 'lodash'</p>

<p>export default {
  setup() {
    const search = _.debounce(query => {
      console.log('搜索:', query)
    }, 500)</p>

<pre><code>return { search }

}
}

2. Vue Composition API实现

可以将防抖节流封装成自定义hook：

javascript
// useDebounce.js
import { ref } from 'vue'
export function useDebounce(value, delay) {
  const debouncedValue = ref(value.value)</p>

<p>watch(value, (newValue) => {
    const handler = setTimeout(() => {
      debouncedValue.value = newValue
    }, delay)</p>

<pre><code>// 清除之前的定时器
if (handler) clearTimeout(handler)

})

return debouncedValue
}

通过以上几种方式，我们可以在Vue 3项目中灵活运用防抖和节流技术，有效提升应用性能并改善用户体验。选择哪种实现方式取决于具体需求和项目复杂度。