vue.js computed와 methods의 차이

최근 앞으로 있을 프로젝트에 대비하여 Vue.js를 공부하고 있다.

원래 성격자체가 깔끔하고 가벼운것 좋아하고 덕지덕지 붙어있는거는 싫어하기에 가장 마음에 드는 프론트엔드 프레임워크가 있다면 vue.js를 꼽고 싶다.

이러한 vue.js에는 다양한 개념들이 많이 등장하는데, 그중 최근 쓰면서 알게된 computed와 methods 차이점에 대해 말해보고자 한다.

둘다 vue.js 안에서 함수를 정의하는 부분이고 데이터가 변동됨에 따라 안에 있는 함수를 재호출 하게 된다.

둘의 차이점은 데이터가 변동되지 않는다고 가정했을때에 드러난다.

데이터 변동이 없는 상태에서 computed는 이전의 계산된 값을 캐시해 두었다가 함수 호출시 다시 쓰게 된다.

반면 methods는 사용될 때마다 함수의 계산을 다시 하게 된다.

만약 데이터가 자주 변동되지 않는다면, 비용적인 면에서는 computed가 좋다고 할 수 있고,

데이터가 수시로 업데이트 된다면 계속해서 캐시를 저장하는 computed보다는 methods가 더 좋을 수 있다.

그래서인지 html 상에서 computed는 마치 변수처럼 쓰이고, methods는 함수처럼 쓰인다.

예를들어 똑같은 parse라는 함수가 있다면 computed는 parse를 그대로 쓰고 methods는 parse()라고 쓰게 된다.