Vue3 upgrade: vue-debounce-decorator

[severinbeauvais]

Investigate/identify:

• whether we can use this library in Vue3
• what is missing to be able to use it (or when it will be available)
• alternate packages (or whether we can change our code as needed)
• what if we stop using this package altogether?

[lambert-alex]

Vue 3 implementation in search-ui

[severinbeauvais]

I came across this in a shared component. vue-debounce-decorator no longer worked with Vue 2.7.

Old:

import { Debounce } from 'vue-debounce-decorator'

/**
   * Called when prop changes (ie, v-model is updated by parent).
   * This method is debounced to prevent excessive validation.
   */
@Watch('value')
@Debounce(300)
private onValueChanged (val: string): void {
  this.emitValid(val)
}

New:

import { debounce } from 'lodash'

/**
   * Called when prop changes (ie, v-model is updated by parent).
   * This method is debounced to prevent excessive validation.
   */
@Watch('value')
private onValueChanged (val) {
  this.onValueChangedDebounced(val)
}

private onValueChangedDebounced = debounce((val: string) => {
  this.emitValid(val)
}, 300)

Since we have a working solution, I'm closing this ticket.

[severinbeauvais]

See also https://vueuse.org/useDebounceFn