vue3 filter

在 Vue3 中，过滤器（filter）已经被移除了。Vue3 推荐使用计算属性（computed）或者方法（methods）来完成类似的功能。

计算属性是根据其依赖进行缓存的，只有当依赖发生变化时才会重新计算。你可以在组件中定义一个计算属性来实现过滤的功能。例如：

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
      filterKeyword: '',
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.filterKeyword));
    },
  },
};
</script>

在上面的示例中，我们使用了计算属性 `filteredItems` 来根据 `filterKeyword` 进行过滤。每当 `filterKeyword` 发生变化时，`filteredItems` 会重新计算。

另一种方式是使用方法（methods）来实现过滤。例如：

<template>
  <div>
    <input type="text" v-model="filterKeyword" />
    <ul>
      <li v-for="item in filteredItems()" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {