vue3+ts模糊查询代码

好的，以下是使用Vue3和TypeScript实现模糊查询的示例代码：

<template>
  <div>
    <input type="text" v-model="searchKey" placeholder="请输入搜索关键词" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

interface Item {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'FuzzySearch',
  data() {
    return {
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
        { id: 4, name: 'pear' },
        { id: 5, name: 'grape' },
      ] as Item[],
      searchKey: '' as string,
    };
  },
  computed: {
    filteredList(): Item[] {
      return filter(this.list, (item: Item) => {
        return item.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) > -1;
      });
    },
  },
});
</script>

这段代码与之前的示例代码类似，但在类型声明和组件定义上有所不同。在组件定义中使用`defineComponent`函数来定义组件，并使用`interface`关键字定义数据对象的类型。在计算属性中，也需要明确指定参数和返回值的类型。