vue3搜索时，筛选出符合条件的数据，并且记录筛选条件在页面上刷新显示

要在Vue 3中实现搜索并记录筛选条件，可以使用计算属性和watchEffect函数来完成。具体实现步骤如下：

1. 在data中定义一个名为“searchQuery”的属性，用于存储搜索条件。

2. 创建一个名为“filteredItems”的计算属性，该属性将根据搜索条件过滤出符合条件的项，并返回一个新的过滤后的数组。

3. 使用watchEffect函数来监听“searchQuery”的变化，并在每次变化时记录搜索条件。

4. 在模板中使用v-for指令循环渲染过滤后的“filteredItems”数组，并使用差值表达式将每个项的名称显示在页面上。

下面是一个完整的例子：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <<p>您搜索的条件是：{{ searchQuery }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
        { id: 4, name: 'pineapple' },
      ],
      searchQuery: '',
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    },
  },
  mounted() {
    watchEffect(() => {
      console.log(`Search query changed to: ${this.searchQuery}`);
    });
  },
}
</script>

在这个例子中，我们使用了一个简单的输入框来获取搜索条件，并使用v-model指令将其绑定到data属性中的“searchQuery”属性上。我们还循环遍历了filteredItems计算属性中的每个项，并使用v-for指令将它们呈现为无序列表中的列表项。

当用户输入搜索条件时，计算属性将根据该条件过滤出符合条件的项，并在模板中动态更新呈现的列表。同时，watchEffect函数也会在每次搜索条件发生变化时记录新的条件，并将其显示在页面上。