[개념잡기] methods 와 computed 의 차이

methods와 computed 의 차이

두 개의 가장 큰 차이점은 캐싱이다.

Vue.js 공식 홈페이지에 나와있는 예제를 가지고 설명하겠다.

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

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

자 이제 2가지 동작을 비교해 보자.

methods

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

computed

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

두 코드 모두 구조가 비슷하다 하지만 차이점은 method는 재 렌더링 할때마다 항상 메소드를 호출한다. 하지만 computed 는 예제의 message 의 값이 변했을 경우에만 재 렌더링 한다. 따라서 message 의 값이 변하지 않으면 호출시 이전에 계산한 값을 바로 반환한다.

캐싱이 필요한 이유

코드를 작성하다보면 자주 바뀌지는 않지만 중요한 계산이 필요할 때가 있다. 그때 methods를 사용하면 렌더링 될때마다 계산을 진행해야한다. 따라서 이 경우에는 computed 를 사용해 변경시에만 호출하도록 하는 것이 좋다.