[Vue.js] computed와 methods ( + watch )

vue를 통해 여러 컴포넌트를 만들면서 점점 아무 생각 없이 computed와 methods를

남발하고 있었고, 점점 어떤 경우에 사용해야 할 지 모호해지고 있음을 느꼈다.

 

그래서 두 가지를 간단하게 정리해보려고 한다.

 

1. computed

computed는 DOM 구조가 생성되기 전에 computed 내부에 있는 function들을 계산하여 캐싱(저장)해두고,
계산에 사용되는 내부 값이 변경 되면 다시 계산한다.

Computed는 위에서 언급한 것과 같이 미리 계산을 실행하여 값을 캐싱 해두기 때문에
이후 동일한 값에 대해서 연산을 할 때 저장된 값을 가져오기만 하면 되므로 속도와 중복 처리 측면에서 큰 장점을 가진다.

 

그리고 template에서 호출시 ()를 생략하여 호출하고, ()에 들어가는 인자들을 넣을 수 없다는 작성 규칙들이 존재한다.

 

2. Methods

Methods는 Vue의 라이프 사이클에 따라서 Methods 내 함수가 호출될 때마다 연산을 실시한다.
즉, 어떤 변수가 바뀌면 다시 연산이 수행된다고 볼 수 있다.

methods 에 많은 코드를 작성하면 그만큼 반복해서 함수가 실행되기 때문에,

성능 면에서 computed에 비해 손해를 볼 것이다.

 

따라서, template 내에서 거의 변하지 않는 데이터를 사용할 경우에는 computed를 사용하는 것이 좋아 보인다.

 

추가로,

computed와 유사한 성격을 가진 watch라는 것이 존재한다.

 

watch는 특정 인스턴스의 데이터가 변경되었을 때 watch에서 선언한 연산을 수행하는 방법이다.

하지만 computed로 이러한 부분을 커버할 수 있기 때문에 많이 사용하지 않는다고 한다.

 

지금까지 정리해본 걸로 보아

methods 남발하는 거는 좋은 습관이 아닌 거 같다.

최대한 computed를 많이 사용하되, 어쩔 수 없는 경우 methods를 사용하는 것이 좋을 것 같다.