[Vue] computed와 Watch

vue에서 data 속성에 있는 값을 사용하고자 할 때, 값이 변화할 때 마다 자동적으로 리렌더링 해주는 인스턴스 속성이 2개가 있다. 바로 computed와 watch, 이 두 속성의 공통점은 값을 감지하다가 변경되면 메서드를 호출함으로써 값을 바로 반환해준다. 이 비슷한 두 속성에 대해 차이점에 대해서 알아보았다.

computed

사용법은 아래 코드를 참고, computed속성 내에 메서드를 정의하고 템플릿내에 호출을 하면 해당 값이 바뀔 때 마다 재호출을 해준다. 이는 캐싱이되는 성질이 있어 해당 값이 바뀌지 않는다면 호출을 절대 하지 않는다.

<template>
  <div id="app">
    <p>{{ formatDate }}</p>
    <!--2021년 10월 08일 -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        today: '20211008'
      };
    },
    computed: {
      formatDate: function () {
        return `${date.substr(0, 4)}년 ${date.substr(4, 2)}월 ${date.substr(6, 2)}일`;
      }
    }
  };
</script>

watch

watch도 computed와 사용법은 유사하다. 하지만 watch는 메서드 트리거의 역할로 사용하는 느낌이 더욱 강하다. computed는 직접 template내에 출력을 해야 해당 메서드가 실행되지만, watch는 값의 변화에만 의존해 메서드를 호출 시키기 때문이다. 웬만한 데이터 포맷팅이나 단순히 보여지는 영역을 컨트롤해야 한다면 computed를 사용하고 더욱 복잡한 로직 (API 통신 및 data 분기 처리)등은 watch를 사용하는 것을 권장하고 있는 것 같다.

<template>
  <div id="app">
    <input type="button" value="increase" v-on:click="increaseNumber" />
    <p id="log">{{ number }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        number: 0
      };
    },
    watch: {
      number: function () {
        if (this.number >= 10) {
          alert('10 이상 입니다!');
        }
      }
    },
    methods: {
      increaseNumber: function () {
        return this.number++;
      }
    }
  };
</script>

참고자료

Computed Props and Watchers — What’s the Difference? - Michael Thissen
Computed 속성과 Watch - Vue School