▶ Computed vs Methods
Computed | Methods |
의존하는 데이터에 따라 | |
computed 속성은 의존된 반응형 데이터를 기반으로 캐시(cached)된다 의존하는 데이터가 변경된 경우에만 재평가됨 즉, 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요 없이 이전에 계산된 결과를 즉시 반환한다 반면, method 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행한다. |
computed와 동일한 로직을 처리할 수 있는 method computed 속성 대신 method로도 동일한 기능을 정의할 수 있다 ![]() |
의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용하다 동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산을 방지한다 |
단순한 특정 동작을 수행하는 함수를 정의할 때 사용된다 데이터에 의존하는지 여부에 관계없이 항상 동일한 결과를 반환하는 함수이다 |
의존된 데이터가 변경되면 자동으로 업데이트 된다 | 호출을 해야만 실행된다 |
무조건 computed만 사용하는 것이 아니라
사용 목적과 상황에 맞게
computed와 method를 적절히 조합하여 사용해야한다.
▶Cache (캐시)
데이터나 결과를 일시적으로 저장해두는 임시 저장고
이후에 같은 데이터나 결과를 다시 계산하지 않고
빠르게 접근할 수 있도록 한다
웹 페이지의 캐시 데이터 과거 방문한 적이 있는 페이지에 다시 접속할 경우 페이지 일부 데이터를 브라우저 캐시에 저장한 후 같은 페이지에 다시 요청했을 때 모든 데이터를 다시 응답 받는 것이 아닌, 일부 캐시 된 데이터를 사용하여 더 빠르게 웹 페이지를 렌더링한다. |
![]() |
'WEB > Vue.js' 카테고리의 다른 글
[Vue.js][기본 문법2] 4. List Rendering (0) | 2024.04.30 |
---|---|
[Vue.js][기본 문법2] 3. Conditional Rendering (0) | 2024.04.30 |
[Vue.js][기본 문법2] 1. Computed Properties (0) | 2024.04.30 |
[Vue.js][기본 문법2] 0. 목차 (0) | 2024.04.30 |
[Vue.js][기본 문법] 7. $ , IME( Input Method Editor) (0) | 2024.04.30 |