WEB/Vue.js

[Vue.js][기본 문법2] 2. Computed vs Methods

bay07 2024. 4. 30. 10:19

▶ Computed vs Methods 

Computed Methods 
의존하는 데이터에 따라   
computed 속성은 의존된 반응형 데이터를 기반으로 캐시(cached)된다 
의존하는 데이터가 변경된 경우에만 재평가됨 

즉, 의존된 반응형 데이터가 변경되지 않는 한 
이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요 없이 
이전에 계산된 결과를 즉시 반환한다 

반면, method 호출은 다시 렌더링이 발생할 때마다 
항상 함수를 실행한다. 
computed와 동일한 로직을 처리할 수 있는 method
computed 속성 대신 method로도 동일한 기능을 정의할 수 있다 

의존하는 데이터에 따라 
결과가 바뀌는 계산된 속성을 만들 때 유용하다

동일한 의존성을 가진 여러 곳에서 사용할 때
계산 결과를 캐싱하여
중복 계산을 방지한다 
단순한 특정 동작을 수행하는 함수를 정의할 때 사용된다

데이터에 의존하는지 여부에 관계없이 
항상 동일한 결과를 반환하는 함수이다
의존된 데이터가 변경되면 자동으로 업데이트 된다  호출을 해야만 실행된다 

 

무조건 computed만 사용하는 것이 아니라 

사용 목적과 상황에 맞게 

computed와 method를 적절히 조합하여 사용해야한다. 


▶Cache (캐시)

데이터나 결과를 일시적으로 저장해두는 임시 저장고

이후에 같은 데이터나 결과를 다시 계산하지 않고 

빠르게 접근할 수 있도록 한다 

웹 페이지의 캐시 데이터 

과거 방문한 적이 있는 페이지에 다시 접속할 경우 

페이지 일부 데이터를 브라우저 캐시에 저장한 후
같은 페이지에 다시 요청했을 때 
모든 데이터를 다시 응답 받는 것이 아닌, 일부 캐시 된 데이터를 사용하여 
더 빠르게 웹 페이지를 렌더링한다.