computed / watch

컴포넌트 옵션의 속성인 data, methods 이외에, computed, watch 도 자주 사용한다. computed 와 watch 는 A 데이터를 기반으로 B 데이터를 변경 할 수 있다는 공통점이 있지만 다른 차이점을 구분해서 사용해야 한다.

 

 

computed

• 익명함수에는 반드시 값을 리턴
• A 데이터에 기반하여 자동으로 B 데이터를 처리/캐싱할 때.(getter/setter)
• 많은 경우 watch 보다는 computed 를 사용

 

watch

• 대상의 값이 변경될 때마다 변경 이전값과 이후값을 인자로 받아 콜백함수 실행
• A 데이터에 기반하여 특정 액션을 실행하고자 할 때 사용, 특히 route 활용
• computed 로 불가능하다면...

 

<div id="demo">{{ count }}</div>

<script>
...
    data() {
        return {
            count: 3
        }
    },
    computed: {
        count() {
            return count++;
        }
    },
    watch: {
        count(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    }
...
</script>

 

위 예제에 컴포넌트 인스턴스가 생성될 때 count 의 초기값 3 은 computed 에 의해 4가 되고 watch 는 4 와 3 을 인자로 보여준다. computed 는 지정한 데이터(count) 로부터 즉시 자동계산을 하였고, 그로 인해 count 가 변경되자 count 를 주시하던 watch 는 log 를 출력했다. 위 코드에서 computed 를 삭제하면 log 는 출력되지 않는다. count 값이 변경되지 않았기 때문에... 쉽게 확인할 수 있는 computed 와 watch 의 차이!

 

vue 공식 문서에는 선언형 프로그래밍인 computed 와 명령형 프로그래밍인 watch 중 어느 것을 사용해도 상관없다면, computed 를 사용하라고 권장하고 있다.