帮我写一段Vue3的模糊查询代码

当用户输入关键字时，我们可以通过模糊查询来查找匹配的数据。下面是一个简单的Vue3组件示例，演示如何实现模糊查询。

<template>
  <div>
    <input type="text" v-model="searchText" @input="search">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' },
        { id: 5, name: 'Elderberry' },
      ],
      searchText: '',
    };
  },
  setup() {
    const list = ref([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' },
      { id: 4, name: 'Durian' },
      { id: 5, name: 'Elderberry' },
    ]);
    const searchText = ref('');

    const filteredList = computed(() => {
      return list.value.filter((item) =>
        item.name.toLowerCase().includes(searchText.value.toLowerCase())
      );
    });

    const search = () => {
      console.log(searchText.value);
    };

    return {
      list,
      searchText,
      filteredList,
      search,
    };
  },
};
</script>

在这个示例中，我们使用了Vue3的响应式API来定义了一个名为`list`的数据数组和一个名为`searchText`的字符串。我们还使用了Vue3的计算属性API来定义了一个名为`filteredList`的计算属性，该属性根据`searchText`和`list`过滤出匹配的数据项。最后，我们使用了`v-for`指令将过滤后的数据渲染到页面上。

当用户输入关键字时，我们可以通过`@input`事件来监听输入框的变化，并调用`search`方法进行模糊查询。在`search`方法中，我们可以打印出当前输入框的值，以便我们调试。

该示例只是一个简单的演示，实际开发中，我们可能需要使用debounce函数或throttle函数来优化查询性能。