Debouncing von Computed Properties in Vue

Der folgende Ansatz kann verwendet werden um Benutzereingaben zu entprellen, die das Rendern der vuejs computed properties auslösen. Bei Bedarf erhöht das Entprellen die Leistung der Website und verbessert die Benutzerfreundlichkeit der Funktionen. Im folgenden Beispiel wird ein Datensatz gefiltert und die Ergebnisse werden interaktiv in einer Tabelle angezeigt. Die Berechnung erfolgt nur einmal, genau 250 ms nachdem der Benutzer aufgehört hat im Eingabefeld zu Tippen. Das Entprellen von computed properties kann durch Überwachung einer Proxy-Variablen (in diesem Fall queryTableBuffer) oder mit den Getter / Setter Methoden der computed properties erreicht werden.

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