vue3 数据过滤方法

在Vue 3中，你可以使用多种方法来过滤数据。以下是几种常见的实现方式：

1. 使用计算属性（Computed Properties）

计算属性是Vue中用于声明式地描述如何根据其他响应式状态计算值的一种方式。你可以使用计算属性来过滤数组。

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
 
const searchQuery = ref('');
 
const filteredItems = computed(() => {
  return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
});
</script>

2. 使用方法（Methods）

你也可以在组件的方法中实现过滤逻辑，然后返回过滤后的数组。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filterItems()" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
 
const searchQuery = ref('');
 
function filterItems() {
  return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
}
</script>

3. 使用侦听器（Watchers）和过滤器（Filters，注意：Vue 3中不推荐使用过滤器，但可以模拟）

虽然Vue 3不推荐使用过滤器，但你可以通过创建一个函数并使用它来模拟过滤器的行为。同时，你可以使用watch来观察某个数据的变化，并相应地更新过滤后的数据。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, watch } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
const searchQuery = ref('');
const filteredItems = ref([]);
 
watch(searchQuery, (newQuery) => {
  filteredItems.value = items.value.filter(item => item.name.toLowerCase().includes(newQuery.toLowerCase()));
});
</script>

4. 使用第三方库（例如lodash）的filter函数（可选）

如果你喜欢使用lodash这样的库来处理数组，你可以这样做：

import { ref } from 'vue';
import _ from 'lodash'; // 确保已经安装了lodash包
 
const items = ref([...]); // 同上定义的items数组
const searchQuery = ref(''); // 同上定义的搜索查询字符串ref对象
const filteredItems = ref([]); // 同上定义的过滤后items的ref对象，初始为空数组。这里不需要在setup中使用watch，因为可以直接使用_.filter。
 
filteredItems.value = _.filter(items.value, item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase())); // 直接使用lodash的filter函数进行过滤。注意：这种方式通常在计算属性或侦听器中更常用，而不是直接赋值。这里只是为了演示如何使用lodash。更好的做法是在计算属性或侦听器中使用它。例如：`computed(() => _.filter(items.value, ...))`。但请注意，直接在模板或方法中使用这种方式可能会导致不必要的性能开销，因为它在每次组件渲染时都会执行。更好的做法是将过滤逻辑放在计算属性或侦听器中。例如：`computed(() => _.