Rebote de propiedades calculadas en Vue

El siguiente enfoque se puede utilizar para eliminar la entrada del usuario que desencadena la representación de las propiedades calculadas de vuej. Cuando sea necesario, la eliminación del rebote aumentará el rendimiento del sitio y mejorará la usabilidad de las funciones. En el siguiente ejemplo, se está filtrando un conjunto de datos y los resultados se muestran interactivamente en una tabla. El cálculo ocurre solo una vez exactamente 250 ms después de que el usuario deja de escribir en el campo de entrada. El rebote de una propiedad calculada se puede lograr observando una variable proxy (queryTableBuffer en este caso) o con los métodos getter / setter de la propiedad calculada.

<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>