vue3 loadsh 防抖功能

loadsh 是一个工具库，我们通常使用 loadsh 的 debounce 函数处理防抖

---

官方API https://www.lodashjs.com/

简单使用方法

<template>
	<input @change="onchange" />
</template>


<script setup lang="ts">
import { debounce } from "lodash";

const onchange  = debounce(hello,500)

function hello(e){
	console.log("hello world")
	console.log(e.target.value)
}
onUnmounted(() => {
    // 移除组件时，取消定时器
    onchange.cancel();
});

</script>

注意几点

• debounce 的 第一个参数必须是 function 函数，不能传入箭头函数，否则 this 指向会出现问题
• vue3 + ts 中，不能直接在 @change 里面写防抖函数，必须赋值给一个变量，否则同样会造成 this 指向问题