[Vue] watch와 computed

watch란

데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성을 말한다.

 

coumputed

데이터를 미리 연산한 뒤에 그 값을 갖고 있는 것을 말한다.

 

watch 문법

1. 변경값 파라메터를 가지지 않는 문법

watch: {
   변경을감시할프로퍼티명: function () {
      ...
 }
}

 

2.변경값 파라메터를 가지는 문법

watch: {
   변경을감시할프로퍼티명: function (변경후의값, 변경전의값) {
      ...
 }
}

 

computed 문법

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

 

computed와 watch 비교

watch: 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합하다.

computed: 종속관계가 복잡할 수록 재계산 시점을 예상하기 힘들기 때문에 종속관계의 값으로 계산된 결과를 리턴하는 것 외의 사이드 이펙트가 일어나는 코드를 지양해야한다.