methods

 

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this`는 컴포넌트 인스턴스를 참조합니다.
      this.count++
    }
  }
})

<button @click="increment">Up vote</button>

위 코드에서 methods 내부 메서드의 this를 보았듯이, 항상 컴포넌트 인스턴스를 참조할 수 있도록 this 값을 자동으로 바인딩한다.

하지만 내부 메서드를 화살표 함수로 정의하는 경우 this가 존재하지 않기 때문에 화살표 함수를 자제해야 한다.

 

Debounce & Throttling

Vue에서 Debounce & Throttling을 ****자체적으로 지원하지 않지만, lodash와 같은 라이브러리를 사용하여 구현할 수 있다.

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // Lodash의 디바운싱 적용
      click: _.debounce(function() {
        // ... 클릭에 대한 응답 ...
      }, 500)
    }
  }).mount('#app')
</script>

 

컴포넌트가 한 번만 사용되는 경우 위와 같이 methods 내부에 적용할 수 있겠지만, 그렇지 않은 경우 해당 메서드를 여러 컴포넌트들이 공유할 수 있게 되어 문제가 될 수 있다.

따라서 각 컴포넌트의 독립성을 유지하기 위해 created 라이프 사이클 hook에 적용하는 방법이 있다.

app.component('save-button', {
  created() {
    // Lodash의 디바운싱 적용
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 컴포넌트가 제거되면 타이머를 취소합니다.
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 클릭에 대한 응답 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})