[Vue+] Computed

Computed

Computed 속성은 템플릿의 데이터 표현을 직관적이고 간결하게 도와주는 속성입니다.

Computed 예시

	<div>{{message.split('').reverse().join}}</div>
    
    <div>{{reverseMessage}}</div>
    
    new Vue({
    	computed: {
        	reverseMessage() {
            	return this.mmessage.split('').reverse().join('');
            }
        }
    })

가장 첫번째의 div를 보게 되면 message라는 state를 역으로 변환해주는 코드입니다. 하지만 이처럼 계산 식이 많아지면 템플릿의 가독성이 떨어지며, 매번 연산이 필요로 하므로 속도에 저하를 줄 수 있습니다.

하지만 computed를 사용하면 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있습니다.

주의사항

1. Computed 속성은 파라미터를 받지 않는다.
2. HTTP 통신과 같이 자원이 많이 필요한 로직을 정의하지 않는다.
   • 자원을 많이 필요로 하는 로직은 watch나 methods에 정의하는 것이 적합합니다.