vue3 TS防抖函数

在Vue 3中，你可以使用Composition API来创建防抖函数。这里是一个简单的例子：

<template>
  <input v-model="input" @input="debouncedInput">
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { debounce } from 'lodash-es';
 
const input = ref('');
 
const debouncedInput = debounce(() => {
  console.log('Input changed!', input.value);
}, 500);
 
// 监听input变化来触发防抖函数
watch(input, (newValue) => {
  debouncedInput();
});
</script>

在这个例子中，我们使用了debounce函数来创建防抖版本的debouncedInput。我们还利用了Vue 3的<script setup>语法糖以及TypeScript支持。watch函数用来监听input的变化，并在其变化时触发防抖函数。

请确保你已经安装了lodash-es库，因为debounce函数来自于这个库。你可以通过以下命令安装它：

npm install lodash-es

这个例子中的防抖函数将在用户停止输入500毫秒后执行。