[Vue.js] computed와 watch

computed와 watch 같은 경우 둘 다 데이터의 변화가 있을 때 사용하기 유용합니다. 그렇다면 무엇이 다른지 한번 확인해보겠습니다. 정답부터 얘기하자면 

computed는 이미 정의된 계산식에 따라 결과값을 반환할 때 사용되며, watch는 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로서 사용할 수 있습니다.

computed

• 너무 많은 연산을 템플릿 안에서 하여 코드가 비대하지고 유지보수가 어려울 때 복잡한 로직에서 사용

바꾸기 전

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

computed 적용

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
 
<script>
    new Vue({
      el: '#example',
      data: {
        message: '안녕하세요'
      },
      computed: {
        // 계산된 getter
        reversedMessage: function () {
        // `this` 는 vm 인스턴스를 가리킵니다.
        return this.message.split('').reverse().join('')
        }
      }
     })
</script>

 

코드처럼 reversedMessage는 message가 변경되면 사용이 됩니다.

특징!

computed 속성 대신 메소드와 같은 함수를 정의할 수도 있습니다. 두 가지 접근 방식은 서로 동일합니다. 차이점은 computed 속성은 종속 대상알 따라 저장(캐싱)된다는 것입니다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다. 즉! message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

 

watch

• 대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우

위의 computed 예제에서 이어서 설명해보겠습니다. 위에 코드에서 reversedMessage를 지우고 message가 변경되었을 때 특정 함수를 실행하고 싶다면 어떻게 해야 될까요? computed에서도 message가 변경되면 reversedMessage 함수가 실행되지만 그것 결국 {{reversedMessage}}가 템플릿에 있어야 됩니다. 따라서 특정 데이터를 감시하고 함수를 실행시키기에 watch가 유용합니다.

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
</div>
 
<script>
    new Vue({
      el: '#example',
      data: {
        message: '안녕하세요'
      },
       watch: {
          message: (newVal) => {
            if(newVal === '안녕하세요2') {
              alert('인사중입니다.')
            }
          }
        }
     })
</script>

 

 

출처

• https://kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1-vs-watch-%EC%86%8D%EC%84%B1