[Vue] Computed, Watch

Computed

Computed는 연산 결과를 캐싱해주게 됩니다. Vue는 state 또는 props의 값이 변경이 되기 때문에 연산을 {{}}를 이용해 값을 넣는 경우 매번 연산을 해 속도 저하가 올 수 있다는 부담이 있습니다. 이러한 연산을 줄이기 위해 연산 결과를 캐싱하여 사용할 수 있습니다.

<template>
	{{won}}
    {{dollar}}
</template>

<script>
	export default {
    	data() {
        	return {
            	won: 1000
            }
        },
        computed: {
        	dollar() {
            	return this.won * 0.0012;
            }
        }
    }
</script>

Computed는 특정한 연산 결과를 캐싱하는데 연산의 대상인 won이 변경되지 않는다면 이미 연산되어 있는 것을 가져옵니다.
(methods를 이용해 함수를 정의할 수 있지만 연산 결과를 캐싱할 수 없기 때문에 자주 사용하는 연산을 사용할 경우 Computed를 사용하는 것이 좋습니다.)

Watch

state, prop가 값이 변경되었을 때를 감지해 특정 행동을 지정할 수 있는 Watch 기능이 있습니다.

단, watch를 사용할 때 Computed도 값이 변경된 것을 감지할 수 있기 때문에 서로 알맞는 기능을 사용하는 것이 중요합니다.

그러면 watch는 언제 이점이 있냐면 언제 변하는지 예측이 어려울 때 사용하면 좋습니다. 특히 비동기 방식에서 어떤 데이터를 요청했을 때 watch로 감시하고 있다가 해당 값이 왔으면 후처리를 진행할 수 있습니다.