Debounce proprietà calcolate in Vue

Il seguente approccio può essere utilizzato per rimandare l'input dell'utente che innesca il rendering delle proprietà calcolate di vuejs. Se necessario, il debounce aumenterà le prestazioni del sito e migliorerà l'usabilità delle funzionalità. Nell'esempio seguente un set di dati viene filtrato e i risultati vengono visualizzati interattivamente in una tabella. Il calcolo avviene solo una volta esattamente 250 ms dopo che l'utente ha smesso di digitare nel campo di input. Il debouncing di una proprietà calcolata può essere ottenuto osservando una variabile proxy (queryTableBuffer in questo caso) o con i metodi getter / setter della proprietà calcolata.

<template lang="pug">
  section.section
    b-field
      b-input(v-model="queryTableBuffer")
    b-table(:data="queryTableResults")
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      table: [],
      queryTable: '',
      queryTableBuffer: ''
    }
  },
  computed: {
    queryTableResults() {
      return extFilteredAndSortedArray(this.table, this.queryTable)
    }
  },
  watch: {
    queryTableBuffer: debounce(function (newVal) {
      this.queryTable = newVal
    }, 250)
  },
  created() {
    this.generateTable()
  },
  methods: {
    generateTable() {
      this.table = extGetDataset()
    }
  }
}
</script>