Démonter les propriétés calculées dans Vue

L'approche suivante peut être utilisée pour éliminer les entrées utilisateur qui déclenchent le rendu des propriétés calculées vuejs. En cas de besoin, le débouncing augmentera les performances du site et améliorera la convivialité des fonctionnalités. Dans l'exemple ci-dessous, un ensemble de données est filtré et les résultats sont affichés de manière interactive dans un tableau. Le calcul n'a lieu qu'une fois exactement 250 ms après que l'utilisateur a cessé de taper dans le champ de saisie. Le débouncing d'une propriété calculée peut être réalisé en regardant une variable proxy (queryTableBuffer dans ce cas) ou avec les méthodes getter / setter de la propriété calculée.

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