Vue.js 공부 기록(6) - Computed 속성, 메서드 사용 차이점

🔍computed 속성

컴퓨티드 속성은 템플릿 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다.

 

아래 코드는 공식 문서에 나와있는 코드인데

message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

만약 message 값이 안녕하세요일 경우 아래와 같이 변환된다.

자바스크립트 내장 API를 통해서도 변환 가능하지만 템플릿이 좀더 복잡해질 경우 가독성이 떨어질 수 있고, 이럴 때 computed 속성을 활용할 수 있다.

만약 메서드로 사용하고 싶다면 함수이기 때문에 괄호를 추가해주어야 에러가 나지 않는다.

 

🔍computed 속성 & 메서드 차이점

computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다. => message가 변경되지 않는 한 computed 속성인 reversedMessage를 여러 번 요청해도 동시에 반환이 가능하다.

 

메서드는 이와 달리 렌더링을 다시 할 때마다 항상 함수를 실행함. => 캐싱을 원하지 않는 경우 메서드 사용 권장.