vue3+ts+vite 监听input输入框

你可以使用 Vue3 中的 `@input` 事件来监听 input 输入框的输入。具体实现可以参考以下代码：

1. 在模板中使用 `v-model` 绑定 input 的值：

<template>
  <div>
    <input v-model="inputValue" @input="handleInput" />
  </div>
</template>

2. 在组件中定义 `inputValue` 变量，并定义 `handleInput` 函数来处理输入框的输入：

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'InputWatcher',
  setup() {
    const inputValue = ref('');

    const handleInput = (event: Event) => {
      const target = event.target as HTMLInputElement;
      inputValue.value = target.value;
      console.log(`Input value: ${inputValue.value}`);
    };

    return {
      inputValue,
      handleInput,
    };
  },
});
</script>

这样，每当 input 输入框的值发生改变时，都会在控制台输出一条输入框的值。其中，`handleInput` 函数会将输入框的值赋值给 `inputValue` 变量，并输出该变量的值。