[TIL - 2024.01.03] Vue.js $on $off

1. $on / $off

 

1) $on

-> 이벤트 청취

 

2) $off

-> 이벤트 청취 중단

 

3) 생겨난 이유는...?

1) 라이프사이클 훅 이슈

// datepicker를 input에 한 번 연결합니다.
// DOM에 직접 연결됩니다.
mounted: function () {
  // Pikaday는 서드파티 라이브러리입니다.
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
// 컴포넌트를 destroy하기 직전에
// datepicker를 destroy합니다.
beforeDestroy: function () {
  this.picker.destroy()
}

-> 라이프사이클 훅에서만 picker에 접근할 수 있는 경우, picker 가 컴포넌트 인스턴스 안에 저장되어야 한다. 끔찍한 정도는 아니지만, 다소 어색하다.

-> 셋업 코드와 제거 코드가 분리되어 있기 때문에, 코드 관리가 복잡해질 수 있다.(무언가 추가하고 제거할 때)

 

2) 해결방법

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

 

출처:

예외적인 상황들 — Vue.js