Vuejs computed

 

computed속성
템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다.
너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다.
아래의 예를 봅시다.

<div id="example">
    {{ message.split('').reverse().join('')}}
</div>
이 템플릿은 더 이상 간단하고 명료하지 않습니다. message를 역순으로 표시한다는 것을
알려면 찬찬히 살펴봐야 하겠죠. 
템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는 더 악화될 것입니다. 

복잡한 로직이라면 반드시 computed속성을 사용해야 하는 이유입니다. 

 

기본예제
HTML 부분
<div id="example">
    <p> 원본 메시지 : "{{message}}</p>
    <p>역순으로 표시한 메시지 : "{{reversedMessage}}"</p>
</div>

 

JS부분
var vm = new Vue({
    el : "#example",
    data : {
        message: '안녕하세요'
    },
    computed : {
        //계산된 getter
        reversedMessage : function(){
            //this 는 vm인스턴스를 가리킵니다. 
            return this.message.split('').reverse().join('')
        }
    }
})

이 예제에서는 computed속성인 reversedMessage를 선언했습니다.
우리가 작성한 함수는 vm.reversedMessage속성에 대한 getter함수로 사용됩니다.
console.log(vm.reversedMessage)    // => '요세하녕안'
vm.message = "Goodbye"
console.log(vm.reversedMessage) //=> 'eybdooG'

콘솔에서 이 예제를 직접 해볼 수 있습니다. 
vm.reversedMessage의 값은 항상 vm.message의 값에 의존합니다.

일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딩 할 수 있습니다.
Vue는 vm.reversedMessage가 vm.message에 의존하는 것을 알고 있기 때문에
vm.message가 바뀔 때 vm.reversedMessage에 의존하는 바인딩을 모두 업데이트할 것입니다.

그리고 가장 중요한 것은 우리가 선언적으로 의존관계를 만들었다는 것입니다. 
computed속성의 getter함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다.