Computed Properties
computed
computed() : 계산된 속성을 정의하는 함수
미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄임
작업을 다 마치고 템플릿으로 넘겨주는 역할
반응성 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산
computed 특징
- 반환되는 값은 computed ref이며 일반 refs와 유사하게 계산된 결과를 .value로 참조할 수 있음(템플릿에서는 .value 생략가능)
- computed 속성은 의존된 반응형 데이터를 자동으로 추적
- 의존하는 데이터가 변경될 때만 재평가
- restOfTodos의 계산은 todos에 의존하고 있음
- 따라서 todos가 변경될 때만 restOfTodos가 업데이트 됨
computed와 동일한 로직을 처리할 수 있는 method
- computed 속성 대신 method로도 동일한 기능을 정의할 수 있음
- 두 가지 접근 방식은 실제로 완전히 동일
computed와 method 차이
- computed 속성은 의존된 반응형 데이터를 기반으로 캐시(cached)된다.
- 의존하는 데이터가 변경된 경우에만 재평가됨
- 즉, 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요 없이 이전에 계산된 결과를 즉시 반환
- 반면, method 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행
Cache(캐시)
- 데이터나 결과를 일시적으로 저장해두는 임시 저장소
- 이후에 같은 데이터나 결과를 다시 계산하지 않고 빠르게 접근할 수 있도록 함
Cache, cookie, localStorage, sessionStorage
공통점: 데이터 임의 저장소
차이점: 캐시는 통신을 함(HTTP 통신, 불필요한 데이터가 없음, 중복 데이터 X, 변경이 있을때만 데이터를 업데이트해줌)
쿠키는 통신할 때 사용()
Cache 예시
웹 페이지의 캐시 데이터
- 페이지 일부 데이터를 브라우저 캐시에 저장 후 같은 페이지에 다시 요청 시 모든 데이터를 다시 응답 받는 것이 아닌 캐시된 데이터를 사용하여 더 빠르게 웹 페이지를 렌더링
computed와 method의 적절한 사용처
- computed
- 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용
- 동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산 방지
- method
- 단순히 특정 동작을 수행하는 함수를 정의할 때 사용
- 데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환하는 함수
Conditional Rendering
v-if
v-if : 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링
false일때는 DOM에 남아있지 않음
v-else-if
v-else
레퍼런스에 담아서 보내줘야함
v-show : 표현식 값의 T/F를 기반으로 요소의 가시성(visibility)을 전환
항상 DOM에 남아있음
v-for
소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링(Array, Object, number, string, lterable)
- v-for는 alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭(alias)을 제공
- 인덱스(객체에서는 키)에 대한 별칭을 지정할 수 있음
v-for with key
반드시 v-for와 key를 함께 사용한다.
- 내부 컴포넌트의 상태를 일관되게 유지
- 데이터의 예측 가능한 행동을 유지(Vue 내부 동작 관련)
v-for with v-if
동일 요소에 v-for와 v-if를 함께 사용하지 않는다.
- 동일한 요소에서 v-if가 v-for보다 우선순위가 더 높기 때문
- v-if조건은 v-for 범위의 변수에 접근할 수 없음
- 같은 태그에 넣을 수 없음
- computed를 활용해 필터링 된 목록을 반환하여 반복하도록 설정
- template 요소를 사용하여 v-if를 이동
<ul>
<template v-for="todo in todos" :key="todo.id">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
</ul>Watchers
watch() : 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출
watch(variable, (newValue,oldValue) => {
//do something
}varialbe : 감시하는 변수
newValue : 감시하는 변수가 변화된 값, 콜백 함수의 첫번째 인자
oldValue : 콜백 함수의 두번째 인자
Lifecycle Hooks
Vue 인스턴스의 생애주기 동안 특정 시점에 실행되는 함수
개발자가 특정단계에서 의도하는 로직이 실행될 수 있도록 함
Vue Style Guide
