vue3 节流实现方法

在 Vue 3 中，节流（throttle）是一种常用的性能优化技术，用于限制函数在一定时间内只能执行一次。这在处理频繁触发的事件（如滚动、窗口尺寸变化等）时非常有用，可以避免不必要的计算和资源浪费。以下是 Vue 3 中实现节流的一些方法和解析：

1、使用 Vue 3 的 throttle 方法：

Vue 3 提供了一个内置的 throttle 方法，可以直接在组件的方法中使用。这个方法接受两个参数：要节流的函数和节流的时间间隔（以毫秒为单位）。

const app = createApp({

  data() {

    return {

      count: 0

    };

  },

  methods: {

    handleClick: Vue.throttle(function() {

      console.log('Button clicked');

    }, 1000)

  }

});

2、自定义节流函数：

如果你需要更多的控制，可以自己实现一个节流函数。这通常涉及到使用 setTimeout 和 clearTimeout 来管理执行时间。

function throttle(fn, delay) {

  let timer = null;

  return function(...args) {

    if (!timer) {

      fn.apply(this, args);

      timer = setTimeout(() => {

        timer = null;

      // 这里可以添加额外的逻辑，比如立即执行一次

      // 如果需要在节流结束后立即执行一次，可以在这里调用 fn

      // fn.apply(this, args);

      // 如果不需要，可以移除这段代码

    }, delay);

  }

}

3、使用 ObjectDirective 创建节流指令：

在 Vue 3 中，你可以创建自定义指令来实现节流。这允许你在模板中直接使用节流功能。

import { ObjectDirective } from 'vue';

const throttleDirective = {

  beforeMount(el, binding) {

    let throttled = false;

    let delay = 1000; // 默认节流时间

    if (binding.modifiers.delay) {

      delay = parseInt(binding.modifiers.delay);

    }

    el.addEventListener('click', function(event) {

      if (!throttled) {

        binding.value(event);

        throttled = true;

        setTimeout(() => {

          throttled = false;

        // 如果需要在节流结束后立即执行一次，可以在这里调用 binding.value

        // binding.value(event);

        // 如果不需要，可以移除这段代码

        // 这里可以添加额外的逻辑

       }, delay);

      }

    });

  },

  beforeUnmount(el) {

    el.removeEventListener('click');

  }

};

app.directive('throttle', throttleDirective);

然后在模板中使用：

<button v-throttle:click="handleClick" delay="500">Click me</button>

4、使用 useThrottle 组合式 API：

在 Vue 3 的组合式 API 中，你可以使用 useThrottle 函数来创建节流函数。

import { ref, onMounted, onUnmounted } from 'vue';

const useThrottle = (fn, delay) => {

  let timer = null;

  const throttled = (...args) => {

    if (!timer) {

      fn(...args);

      timer = setTimeout(() => {

        timer = null;

      // 这里可以添加额外的逻辑

      // 如果需要在节流结束后立即执行一次，可以在这里调用 fn

      // fn(...args);

      // 如果不需要，可以移除这段代码

      // 这里可以添加额外的逻辑

     }, delay);

    }

  };

  onMounted(() => {

    window.addEventListener('resize', throttled);

  });

  onUnmounted(() => {

    window.removeEventListener('resize', throttled);

  });

  return throttled;

};

然后在组件中使用：

setup() {

  const handleClick = () => {

    console.log('Button clicked');

  };

  const throttledClick = useThrottle(handleClick, 1000);

  return {

    throttledClick

  };

}