Computed Property
Computed
- Computed: 계산된 속성을 정의하는 함수
=> 미리 계산된 속성을 사용해 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄임
Computed vs. Methods
-
computed와 method 차이
computed 속성은 의존된 반응형 데이터를 기반으로 캐시된다.
의존하는 데이터가 변경된 경우에만 재평가됨
즉, 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요 없이 이전에 계산된 결과를 즉시 반환
=> 반면, method 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행 -
Cache (캐시)
데이터나 결과를 일시적으로 저장해두는 임시 저장소
이후에 같은 데이터나 결과를 다시 계산하지 않고 빠르게 접근할 수 있도록 함 -
computed와 method의 적절한 사용처
- computed
의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용
동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산 방지
- method
단순히 특정 동작을 수행하는 함수를 정의할 때 사용
데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환하는 함수
-
method와 computed 정리
- computed
의존된 데이터가 변경되면 자동으로 업데이트
- method
호출해야만 실행됨
=> 무조건 computed만 사용하는 것이 아니라 사용 목적과 상황에 맞게 computed와 method를 적절히 조합하여 사용
Conditional Rendering
v-if
- v-if: 표현식 값의 true/false를 기반으로 요소를 조건부로 렌더링
v-if vs. v-show
- v-show: 표현식 값의 true/false를 기반으로 요소의 가시성을 전환
List Rendering
v-for
- v-for: 소스 데이터(Array, Object, Number, String, Iterable)를 기반으로 요소 또는 템플릿 부록을 여러 번 렌더링
결과 >
v-for with key
- 반드시 v-for와 key를 함께 사용한다
=> 내부 컴포넌트의 상태를 일관되게 하여 데이터의 예측 가능한 행동을 유지하기 위함
v-for with v-if
-
동일 요소에 v-for와 v-if를 함께 사용하지 않는다
: 동일한 요소에서 v-if가 v-for보다 우선순위가 더 높기 때문
= v-if에서의 조건은 v-for 범위의 변수에 접근할 수 없음
-
v-for와 v-if 해결법 2가지
1) computed 활용
2) v-for와 < template > 요소 활용
Watchers
watch
- watch(): 하나 이상의 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출
computed vs. watch
Lifecycle Hooks
- Lifecycle Hooks: Vue 인스턴스의 생애주기 동안 특정 시점에 실행되는 함수
Vue Style Guide
참고
-
Computed 주의사항
-
배열 변경 관련 메서드
