我想用几个不同的过滤器来构建一个搜索函数。我有一个RangeSlider组件和函数，它可以给予我相应的最小最大值。我将这些过滤器值保存为对象，并在每次过滤器更改时立即将它们发送到后端。
这里我使用if，else条件，这当然不是正确的方法，但我不知道还能做什么，希望至少有一个工作原型。
如果你有一个或两个过滤器，这仍然可以工作，但如果你有很多不同的过滤器。此外，我想知道如何优化整个过滤过程？与每个请求，整个集合被搜索。如果以前的搜索查询应用到每个新的过滤器，而不是搜索整个集合一遍，这将是伟大的。
如何才能做到这一点？

前端每次更新筛选器时，都会将activeFilters发送到后端

const activeFilters = reactive({ salePrice: '', space: '' })

async function updateFilter(minmax, property) {
  activeFilters[property] = minmax

  const filteredObjects = await $fetch('/api/properties/filtered', {
    method: 'POST',
    body: activeFilters,
  })

  return filteredObjects
}

后端

body = {“销售价格”：{“最小值”：630000，“最大值”：850948 }，《太空》：{“最小值”：53，“最大值”：一百六十七} }

export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  try {
    if (body.salePrice !== '' && body.space !== '') {
      const properties = await Property.find({
        salePrice: { $gte: body.salePrice.min, $lte: body.salePrice.max },
        livableSurface: { $gte: body.space.min, $lte: body.space.max },
      })
      return properties
    }

    if (body.salePrice !== '') {
      const properties = await Property.find({
        salePrice: { $gte: body.salePrice.min, $lte: body.salePrice.max },
      })
      return properties
    }

    if (body.space !== '') {
      const properties = await Property.find({
        livableSurface: { $gte: body.space.min, $lte: body.space.max },
      })
      return properties
    }

    const properties = await Property.find()
    return properties
  } catch (err) {
    console.dir(err)
    event.res.statusCode = 500
    return {
      code: 'ERROR',
      message: 'Something went wrong.',
    }
  }
})

HTML

<InputsRangeSlider
  :config="salePriceSliderConfig"
  @updated-min-max="updateFilter($event, 'salePrice')"
/>

<InputsRangeSlider
  :config="spaceSliderConfig"
  @updated-min-max="updateFilter($event, 'space')"
/>