Vue.js computed속성의 캐싱 vs 메소드

Vue.js computed속성의 캐싱 vs 메소드

표현식에서 메소드를 호출하여 같은 결과를 얻을 수도 있습니다.

HTML부분
<p>뒤집힌 메시지 : "{{reversedMessage}}"</p>

JS부분
//컴포넌트내부
methods : {
    reversedMessage: function(){
        return this.message.split('').reverse().join('')
    }
}

computed속성 대신 메소드와 같은 함수를 정의할 수도 있습니다.
최종 결과에 대해 두 가지접근 방식은 서로 동일합니다. 
차이점은 computed속성은 종속 대상을 따라 저장(캐싱)된다는 것입니다.
computed속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다.
즉, message가 변경되지 않는 한, computed속성인 reverseMessage를 여러 번 
요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다. 

또한 Date.now()처럼 아무 곳에도 의존하지 않는 computed속성의 경우 절대로 업데이트되지 
않는다는 뜻입니다.

JS부분
computed: {
    now : function(){
        return Date.now()
    }
}

이에 비해 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행합니다. 
캐싱이 왜 필요할까요? 계산에 시간이 많이 걸리는 computed속성인 A를 가지고 있다고 해봅시다.
이 속성을 계산하려면 거대한 배열을 반복해서 다루고 많은 계산을 해야 합니다. 
그런데 A에 의존하는 다른 computed속성값도 있을 수 있습니다. 
캐싱을 하지 않으면 A의 getter함수를 꼭 필요한 것보다 더 많이 실행하게 됩니다. 
캐싱을 원하지 않는 경우 메소드를 사용하십시오