Vue method, computed 속성

Vue 에서 함수를 구현하기 위해서 속성으로 computed 와 methods 를 제공 한다. 이 속성들의 특징과 차이점에 대해 설명한다.

methods

methods는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.
반환하는 값이 계속 같아도 함수가 계속 호출이 된다. 즉 렌더링이 일어날 때마다 계속 호출된다.

computed

computed는 대상으로 정한 data 속성에 정의한 반응형 데이터(reactive data) 값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주며, 결과 값은 저장(캐싱)을 한다. data() 속성 값이 변경되지 않았다면 캐싱 처리하고 있던 데이터를 반환한다.

methods vs computed

methods 는 component가 관리하는 데이터가 변경될 때 마다 실행되며,
computed 는 종속된 데이터가 변경될 경우에만 실행된다.

• computed
  함수가 아닌 불변 속성의 변수처럼으로 사용하게 된다.
  다른 속성을 관찰하고 해당 속성을 기반으로 속성을 반환한다.
  매개변수를 사용할 수 없다.

• methods
  매개변수를 사용할 수 있다.
  method의 내의 자신의 참고하고 있는 data가 변경되거나 자신과 상관없는 데이터가 변경이 되도 다시 실행이 된다(리랜더링)

REF

https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98