[Vue.js] watch vs computed(데이터 변화 감지)

목차

데이터 변화 감지하는 점은 동일하지만 용도가 다름

watch

데이터의 변화를 감지하고 원하는 로직을 수행하는데 사용

• 주로 데이터 변화 시 비동기적 로직 등 복잡한 로직 수행 시 사용됨
• 변경 전 데이터, 변경 된 데이터를 매개변수로 받아서 처리 가능

<div id="app">
  <p>카운트: {{ count }}</p>
  <button @click="increment">증가</button>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  watch: {
		//매개변수로 변경된 값, 변경 전 값을 받을 수 있음
    count(newValue, oldValue) {
      console.log('count가 변경되었습니다. 이전 값: ${oldValue}, 새 값: ${newValue}');
			//ajax 로직 생략...
    }
  }
});

computed

기존의 데이터를 기반으로 새로운 데이터 생성/가공하는데 사용

• 자동 캐싱 지원, 중복 계산을 방지하고 성능 최적화
• 기존 데이터를 가공 후 복잡한 계산이 필요한 경우 사용
• 메소드처럼 사용하는게 아니라 데이터처럼 사용됨

<div id="app">
  <p>반지름: <input type="number" v-model="radius"></p>
  <p>원의 넓이: {{ circleArea }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    radius: 0
  },
  computed: {
    circleArea() {
      return Math.PI * this.radius * this.radius;
    }
  }
});

computed 속성을 이용한 동적 클래스 코드 작성

<div id="app">
		<!-- class 바인딩에 computed return 값을 연결 -->
    <p :class="errorTextcolor">Hello</p>        
</div>

new Vue({
    el: '#app',
    data: {
        isError: false  
    },  
    computed: {
        errorTextcolor: function() {
						// isError에 this. 안 붙이면 못 찾음
            return (this.isError ? 'warning' : null);
        }
    }
});

isError의 값 변경 시 computed 속성에 의해 동적으로 클래스가 적용됨