Vue.js - Computed 속성

• Computed 속성
  • 템플릿 내에 표현식을 사용 할 수 있으나 간단한 연산이 아닐경우 코드의 양이 많아지며 유지보수가 어렵다.
  • 복잡한 로직이 사용 될경우 computed 속성을 사용 해야 한다.
  • 사용 예시

  • 

  • Computed 속성 사용시 중복 제거에 효과가 있다.
    • {{reversedMessage}} 템플릿이 3개가 있을 경우 computed 객체 내 reversedMessage 함수만 변경 해주면됨.
  • computed 속성과 method 차이점
    • method 함수 사용시에는 템플릿에서 호출시 () 괄호를 사용 해야 한다.
    • computed 속성 사용 시 () 괄호 생략이 가능하다.
    • computed 속성의 경우 렌더링 후에 데이터를 캐싱(저장) 하는 방식이며 대상이 변경 될 때만 함수를 실행한다. -> 변경 되지 않는 한 동일한 함수를 여러번 요청해도 계산을 다시 하지 않고 저장된 데이터를 불러온다.
    • method 의 경우 요청 될 때마다 함수를 반복 실행한다.
    • 캐싱을 원하지 않는경우 method를 사용 해야 한다.