하고 싶은 일.

vue.js(vue-cli)로 제작된 SPA에서textarea를 편집하면 마지막 편집 수초 후에 저장 처리를 실행합니다.
'기본부터 배우는 Vue.js(통칭'캣츠북')를 보면 Lodash의 debounce를 사용하면 가능하다.
기본부터 배운 Vue.js- 지원 페이지
여기를 참고하여 vue-cli로 실현하는 방법을 총결하였다.

Npm으로 Lodash 설치

4Lodash 공식 페이지 위에 적힌 명령을 실행합니다.

$ npm i --save lodash

Lodash 가져오기

vue

<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
}
</script>

Lodash를 사용하는 vue 파일의 script 시작 부분에서 가져옵니다.
CDN을 사용하여 Lodash에 액세스하는 경우(밑줄) 을 사용하기 때문에 import 이름을 모방합니다.결정했어.제이큐리에 달러를 쓴 것 같아.
이 수입 방법은 투덜거려도 나오지 않아 힘들다.

debounce 사용

vue

<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
  data() {
    return {
      memos: [
        {
          markdown: ""
        }
      ]
  },
  watch: {
    memos: {
      handler: _.debounce(function() {
        this.saveMemos(); // 実行したい処理
      }, 2000), // memosのデータの更新が終わった2秒後に実行される
      deep: true
    }
  },
// ~ 中略 ~
};
</script>

watch 옵션의 코드는 고양이 원본 지원 페이지에 적힌 것과 거의 같습니다.
또한 플러그인 대상을 감시할 수 있는 옵션인'deep'과handler 속성을 사용했다.textarea의 데이터를 memos의markdown에 저장하기 때문입니다.
이렇게 하면 하고 싶은 일을 할 수 있어...!

참고 문헌

Lodash란?

· Lodash를 통해 정렬 처리
・너무 가늘지만 전달하고 싶은 로데시.js의 이야기(KAYAC enginner's blog)

debounce란?

・debounce（slideship）
・lodash의 debounce와 throttle을 통해 부하에 간단하게 대응(Qita)