Vue3+TS中实现搜索框的实时搜索

<script lang="ts" setup>是Vue3中的一个新特性，用于在单文件组件中编写原生 JavaScript 或 TypeScript 代码。它可以让你在组件中使用原生的 JavaScript 或 ypeScript 语法，而无需使用Vue的语法。

要实现搜索框的实时搜索，可以按照以下步骤进行操作：

1. 在 <script> 标签中，定义一个响应式的数据属性，用于保存搜索框中的输入值和搜索结果；
2. 使用 watch 函数来监听搜索框输入值的变化，并在每次变化时触发搜索逻辑；
3. 在搜索逻辑中，可以使用异步请求或其他方式获取搜索结果，并将搜索结果保存到响应式的数据属性中；
4. 在模板中，使用 v-model 指令将搜索框的值与响应式数据属性进行双向绑定，以实现实时更新搜索结果的效果。

下面是一个示例代码：

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

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

// 定义响应式数据属性
const searchText = ref('');
const searchResults = ref([]);

// 监听搜索框输入值的变化
watch(searchText, async (newValue) => {
  // 发起搜索请求或其他搜索逻辑
  const results = await search(newValue);
  // 更新搜索结果
  searchResults.value = results;
});

// 模拟搜索请求的函数
async function search(keyword) {
  // 这里可以使用异步请求获取搜索结果
  // 这里只是一个示例，返回一个模拟的搜索结果数组
  return [
    { id: 1, name: '搜索结果1' },
    { id: 2, name: '搜索结果2' },
    { id: 3, name: '搜索结果3' },
  ];
}
</script>

这样，当用户在搜索框中输入关键字时，searchText的值会实时更新，触发 watch 函数中的搜索逻辑，并将结果保存到 searchResults 中。模板中使用 v-for 指令遍历 searchResults 数组，动态渲染搜索结果列表。