vuejs - Кэширование результатов поиска таблицы на основе нескольких фильтров

Question

Я использую vuejs для этого проекта, но эта проблема не обязательно связана, но если есть vue-way, я бы предпочел это.

Я строю таблицу, которая позволяет пользователю иметь фильтры для столбцов (в этом случае простые input s). Столбцы являются динамическими, поэтому количество данных (тысячи строк, но менее 100 000 записей).

// example data 
var columns = ['id', 'title', 'date', 'colour'] 
var data = [{ id: 1, title: 'Testentry 1', date: '2017-02-21T07:10:55.124Z', colour: 'green'}] 

Вот проблема: я итерация по столбцам, проверяя, если поиск входов существует, и если да, то я стараюсь фильтровать данные, основанные на SEARCHQUERY. В случае идентификатора сложность времени составляет O(n). Если я знаю, что поиск названия дополнительно, я могу повторно использовать результат первого поискового запроса, и нужно значительно уменьшить объем данных.

Поисковые запросы хранятся в объекте search, а отфильтрованные данные - это вычисленное свойство, которое обновляется при изменении search. Способ, которым это работает, заключается в том, что если я изменил поисковый запрос на title, он переоценил бы поисковый запрос даже для ID, хотя поисковый запрос для этого не изменился.

Для этого потребуется кэширование данных для каждого столбца. И нужно только проверять колонтитулы.

изменения: добавлен код для фильтрации:

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 
} 

Answer 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 
    } 
}, 
....