<aside> 💡 어떠한 계산하는 로직이 필요할 때, computed를 쓴다고만 막연히 생각했지만, 생각해보면 일반 함수로도 계산하는 로직을 짤 수 있을텐데.. 라는 의문이 들었다.
일반 함수와 computed의 차이점을 통해 computed의 특징에 대해 알아보자.
</aside>
일반함수
일반 함수는 호출될 때마다 항상 실행된다.
예를 들어, 템플릿 내에서 여러번 호출되면 “그때마다” 동일한 연산을 반복하게 된다.
computed
종속된 반응형 데이터가 변경되지 않는 한 이전 결과를 캐시한다.
따라서 같은 값이 여러번 요청 되더라도 재계산되지 않는다.
일반함수
일반 함수는 그저 함수를 호출할 때 실행된다.
따라서 해당 함수가 사용하는 데이터가 변경되어도 자동으로 업데이트 되지 않는다.
변경된 데이터에 따라 함수를 실행하게 하려면 수동으로 함수를 다시 호출 해야한다.
computed
내부에서 사용하는 반응형 데이터가 변경되면 자동으로 다시 계산된다.
따라서 데이터의 변경을 자동으로 감지하고 업데이트할 수 있다.
일반함수
일반 함수를 템플릿에서 사용할 때, 함수 호출은 매 랜더링 시점마다 수행된다.
특히 함수가 복잡한 계산을 수행하는 경우, 성능에 영향을 미칠 수 있다.
computed
템플릿 내에서 변수처럼 사용할 수 있으며, 데이터가 변경될 때만 재계산되므로 성능상 이점이 있다.
일반함수
일반 함수는 단순히 값만을 반환하는 경우가 많아서, 함수 실행의 의도를 파악하기 어려울 수 있다.
computed
computed 속성을 사용하면 그 의도가 일반함수보다 더 명확하다.
특정 값이 다른 반응형 데이터가 종속되어 있으며, 이를 자동으로 업데이트하고 싶다는 것을 나타낸다.
따라서 변경하고 싶은 값이 어떤 값인지, 그 값이 어떤 값에 종속되어 있는지 파악할 수 있다.