methods 와 computed 의 차이

두개의 차이 점은 캐싱(casing)이다.

vue.js 공식 홈페이지에 있는 예제를 보면

<p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>

reversedMessage()를 통해서 뒤집힌 메세지를 출력하고 있다.

 

이를 methods형식으로 구현할 경우,

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

 

이를 computed로 구현할 경우,

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

두 코드 모두 구조가 비슷하지만 method는 랜더링을 할때마다 항상 메서드를 호출해야하지만, computed는 예제의 message의 값이 변했을 경우만 다시 랜더링 한다. 결과적으로 message의 값이 변하지 않을 경우 재 호출을 할 경우 이전의 연산한 값을 리턴한다.

가장 큰 차이점이 여기서 발생한다. computed는 계산해야하는 목표 데이터를 정의하는 선언형프로그래밍 방식이며 methods는 렌더링이 일어날 때마다 함수를 실행한다. 즉, computed는 결과를 캐싱하고 methods는 종속된 값이란 개념이 없다.

총정리를 하자면 coputed 속성은 종속 대상을 따라 캐싱된다는 것이며 computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다. 반면, methods를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행합니다. 따라서, 연산시간이 많이 걸리는 computed 속성인 A를 가지고 거대한 배열을 반복해서 다루고 많은 계산을 해야한다면 A에 의존하는 다른 computed 속성 값도 있을 수 있다. 캐싱하지 않으면 A의 getter함수를 필요 이상으로 실행하게된다. 캐싱을 원하지 않을 경우 methods를 사용하는 것이 바람직하다