computed 옵션 속성은 함수를 값으로 가지는 methods 옵션 속성과 같은 속성을 값으로 가집니다. computed 옵션 속성에 정의한 함수는 내부에서 항상 데이터를 참조하는데, 한 번 참조한 데이터는 값이 변경되기 전까지 computed 옵션 속성에 의해 캐싱됩니다.

예제 코드에서는 <h1> 태그로 두 번에 걸쳐 fullName 데이터 속성을 참조합니다. 하지만 코드를 실행하고 개발자 도구(F12)를 보면 콘솔에 한 번만 출력됩니다. 이는 fullName 데이터 속성을 <template> 태그 영역에 출력하기 위해 한 번만 접근하고, 이후에는 캐싱된 값을 가져왔기 때문입니다. 즉, fullName 데이터 속성에 다시 접근하지 않았음을 보여주는 근거입니다.

그림 3-43 computed 옵션 속성을 사용한 결과