vue3 lodash 防抖函数写在click中不生效？

  • Z时代
  • 2024-02-05
  • 分类：IT

我在utils的public.ts封装了一个方法

import _ from 'lodash'
// 节流
export const getDebounce = (fn: (e: Event) => void, count: number) => _.debounce(fn, count)

login.vue使用

import { getDebounce } from '@/utils/public'
const login = () => { console.log(123) }
<el-button @click="getDebounce(login,1000)">登录</el-button>

但这样写不生效，换成下面写法就生效了

const login = () => { console.log( 123 ) }
const loginDe = getDebounce(login, 1000)
<el-button  @click="loginDe">登录</el-button>

在我看来 他们两是一个意思，为什么上面不生效？

回答：

并不是一个意思，vue的事件绑定可以绑定一个回调函数，也可以是一段回调函数体，当你绑定的是一个函数名时【即你描述中下面那种】，它的回调函数就是该函数,而如果绑定的不是一个函数名，那么就会自动包裹一层匿名函数，也就是说<el-button @click="getDebounce(login,1000)">登录</el-button>这个会被视为<el-button @click="() => getDebounce(login,1000)">登录</el-button>

回答：

都用上vue3了，不如封装一个防抖hook：

import { ref, watch, onUnmounted } from 'vue';
export default function useDebounce(fn, delay) {
  const timeout = ref(null);
  const debounceFn = (...args) => {
    clearTimeout(timeout.value);
    timeout.value = setTimeout(() => {
      fn(...args);
    }, delay);
  };
  onUnmounted(() => {
    clearTimeout(timeout.value);
  });
  return debounceFn;
}

使用方法：

import { ref } from 'vue';
import useDebounce from './useDebounce';
export default {
  setup() {
    const input = ref('');
    const debouncedInput = ref('');
    const updateDebouncedInput = useDebounce((value) => {
      debouncedInput.value = value;
    }, 500);
    watch(input, (newValue) => {
      updateDebouncedInput(newValue);
    });
    return {
      input,
      debouncedInput,
    };
  },
};

以上是 vue3 lodash 防抖函数写在click中不生效？ 的全部内容， 来源链接： utcz.com/p/934260.html

回到顶部