用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

<template>
  <input v-model="inputValue" @input="handleInput" />
</template>
 
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
 
export default defineComponent({
  setup() {
    const inputValue = ref('');
    let timeout: number | null = null;
 
    const handleInput = (event: Event) => {
      const input = event.target as HTMLInputElement;
      clearTimeout(timeout as number);
      timeout = window.setTimeout(() => {
        // 处理输入结束后的逻辑，例如发请求等
        console.log('Input value after debounce:', input.value);
      }, 500);
    };
 
    // 组件卸载前清除定时器
    onUnmounted(() => {
      if (timeout) {
        clearTimeout(timeout);
      }
    });
 
    return {
      inputValue,
      handleInput,
    };
  },
});
</script>

这个例子展示了如何在Vue 3中使用Composition API结合TypeScript来创建一个带有防抖功能的输入框。handleInput函数通过setTimeout实现了防抖逻辑，并且在组件卸载前清除了定时器，以防止潜在的内存泄漏。