vuejs - 複数のフィルタに基づくテーブルの検索結果のキャッシュ

Question

私はこのプロジェクトではvuejsを使用していますが、この問題は必ずしも結びついていませんが、vue-wayがある場合はそれをお勧めします。

私はテーブルを構築しています。これにより、ユーザーは列単位のフィルタ（この場合は単純input）を持つことができます。列は動的なので、データの量（行数千、ただし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に基づいてデータをフィルタ処理しようとしています。 IDの場合、時間複雑度は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 
    } 
}, 
....