Javascript vuejs-基于多个筛选器缓存表的搜索结果

我在这个项目中使用vuejs，但是这个问题不一定是相互关联的——但是如果有vue方式，我更愿意这样

我正在构建一个表，使用户可以使用每列过滤器（在本例中为简单的

input

s）。列是动态的，数据量也是动态的（数千行，但少于100.000个条目）

问题是：我正在迭代列，检查是否存在搜索输入，如果存在，我尝试根据searchquery过滤数据。对于ID，时间复杂度为

O（n）

。如果我还知道如何搜索标题，我可以重用第一次搜索查询的结果，大大减少需要查看的数据量

搜索查询存储在对象

search

中，过滤后的数据是一个计算属性，每当

search

发生更改时，该属性都会更新。但其工作原理是，如果我更改

title

的searchquery，它将重新评估searchquery，即使是ID，尽管该ID的searchquery没有更改

这需要对为每列筛选的数据进行某种缓存。并且只需要查询正在进行的列

编辑：为筛选添加了代码：

filteredRows () {
  var rows = this.data
  for (var i = 0; i < this.columns.length; i++) {
    var column = this.columns[i].name
    var search = this.tSearch[column]

    if (!search && search.length === 0) continue

    console.log(column + ': ' + ' (' + search + ') -> ' + rows.length)
    rows = _.filter(rows, (row) => {
      var value = '' + row[column]
      value.search(search) > -1
    })
  }

  return rows
}

filteredRows（）{
var rows=this.data
for（var i=0；i'+rows.length）
行=\过滤器（行，（行）=>{
变量值=“”+行[列]
值。搜索（搜索）>-1
})
}
返回行
}

只是一个建议，但您是否尝试使用观察者来获取输入的新旧值

data: function() {
  return {
    propertyToWatch: 'something'
  }
},
computed: {
  ...
},
watch: {
  'propertyToWatch': function (val, oldVal) {
    console.log(oldVal); // logs old value
    console.log(val); // logs current value
    // here you can call a function and send both of these args and detect diff
  }
},
....

---

我们能看看你的计算属性代码吗？@Justin：当然，我刚刚加了它。手表在深度属性上似乎不是那样工作的。对于新值，新值总是相同的，仅仅观察对象而不是对象上的属性对我没有帮助。这是一个想法，对不起，我帮不上忙。如果我想到其他东西，我会编辑。

data: function() {
  return {
    propertyToWatch: 'something'
  }
},
computed: {
  ...
},
watch: {
  'propertyToWatch': function (val, oldVal) {
    console.log(oldVal); // logs old value
    console.log(val); // logs current value
    // here you can call a function and send both of these args and detect diff
  }
},
....