用watch侦听实现模糊搜索 vue3

在Vue 3中，我们可以利用`ref`和`watch`特性来实现实时搜索功能，即所谓的“模糊搜索”。这种实现方法通常适用于需要快速响应用户输入，并筛选展示数据的情况。

### 使用`ref`和`watch`实现模糊搜索

首先，我们需要创建一个用于存储输入值的`ref`实例：

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

export default {
  setup() {
    const searchInput = ref('');
    
    return {
      searchInput,
    };
  },
};
</script>

接下来，在模板部分添加一个输入框和动态展示结果的部分：

<template>
  <div>
    <!-- 输入框 -->
    <input type="text" v-model="searchInput" placeholder="输入关键词进行搜索">
    
    <!-- 搜索结果列表 -->
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

### 实现`watch`监听并过滤数据

我们可以在组件的生命周期钩子函数里初始化数据，并设置`watch`来监听`searchInput`的变化。当输入值发生变化时，通过过滤数组来更新显示的数据。

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

export default {
  setup() {
    const searchInput = ref('');
    const items = [
      { id: 1, name: 'Apple', description: 'Red or Green fruit' },
      { id: 2, name: 'Banana', description: 'Yellow fruit' },
      // 更多数据...
    ];
    const filteredItems = ref(items);

    onMounted(() => {
      // 初始化搜索结果为所有项
      filteredItems.value = items;
      
      // 设置watch监听器
      watch(searchInput, (newVal) => {
        if (!newVal.trim()) {
          // 如果输入为空，显示所有项目
          filteredItems.value = items;
        } else {
          // 过滤出包含新输入值的项目名称
          filteredItems.value = items.filter(item => item.name.toLowerCase().includes(newVal.toLowerCase()));
        }
      });
    });

    function watch(...args) {
      // Vue的watch API实际上就是一个代理到原生ES6 Proxy的一个实现，
      // 我们这里为了模拟，手动实现这个功能即可。
      let handler = new Proxy(args[0], {
        get(target, key) {
          console.log(`读取属性 ${key} 的值`);
          return target[key];
        },
        set(target, key, value) {
          console.log(`设置属性 ${key} 的值为 ${value}`);
          // 调用原有的watch处理逻辑
          return Reflect.set(handler, key, value);
        },
      });
      return args(handler);
    }

    return {
      searchInput,
      filteredItems,
    };
  },
};
</script>

在这个例子中，`watch`监听了`searchInput`的改变，并根据新的搜索关键字更新了`filteredItems`数据，实现了实时搜索的功能。当你修改输入框的内容时，你可以看到搜索结果会立即更新，只展示那些包含当前搜索关键字的项目。这种方式能够提供流畅的用户体验，并且易于维护和扩展。

### 相关问题:

1. 在Vue中如何实现高效的实时搜索？
2. Vue中的`watch`和`computed`有何区别？
3. 如何优化模糊搜索性能避免频繁触发`watch`导致的性能损耗？

以上就是使用Vue 3的`ref`和`watch`实现实时搜索的基本步骤及示例代码解析，希望对你有所帮助。