[Vue.js] v-modelのinputの処理を間引く

v-modelでの入力する際のinput処理を間引く

input時に動く処理が多くて重くなってしまったので、間引けないか考えた時のメモ
※class styleで記述しているので注意

setterが動く際にlodashのdebounceを使って間引くようにする

<template>
  <textarea v-model="text" />
</template>

<script lang="ts">
import _ from 'lodash'
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class DebounceTextArea extends Vue {
  public _text: string = ""

  public get text(): string {
    return this._text
  }

  // debounceの返り値がFunctionなのでmethodとして定義しておく
  public debounceTextSetter = _.debounce((text: string) => {
    this._text = text
  }, 1000)

  public set text(text: string) {
    // debounceで入力が終わってから値が設定されるようにする
    this.debounceTextSetter(text)
  }
}
</script>