computed
아래 예제는 count * 2 라는 표현식이 4번 중복되어 실행되고 있다.
지금은 간단한 표현식이지만 복잡한 표현식일 경우 매우 비효율적이게 된다.
해당 표현식을 함수로 만들어도 함수가 4번 호출되는 건 마찬가지므로 역시 비효율적이다.
이럴 때 사용하는 것이 Computed다.
computed는 함수가 아니고 계산된 데이터다.
따라서 이중 중괄호 내부에는 실행을 의미하는 ()는 작성하지 않는다.
computed는 캐싱 기능을 가지고 있기 때문에 첫 번째 double을 출력할 때 이미 해당 데이터가 6이라는 것을 알기 때문에 아래에서는 더 이상 연산을 수행하지 않는다.
다른 예제를 살펴 보자.
아래는 API 호출을 통해 200개의 todos 데이터를 받아와서 todos의 title을 대문자로 변경하여 출력하는 예시다.
computed를 사용하여 만든 계산된 데이터도 말 그대로 데이터기 때문에 v-for에 작성할 수 있다.
현재 총 400개의 title을 출력하고 있지만 두 번째 ul 부터는 이미 캐싱이 되어있기 때문에 연산을 수행하지 않는다.
아래 예제는 user라는 객체를 생성하고 computed를 통해 user의 age를 연산하여 출력하고 있다.
이 때 computed의 연산은 의존되어 있는 데이터(user.age)가 변경될 시에만 연산을 수행하고 그 외 데이터(user.name)가 변경될 경우는 연산이 수행되지 않는다.
따라서 최적화가 잘 되어있는 모습을 볼 수 있다.
아래 예제를 보면 computed의 데이터를 변경해도 변경된 값이 적용되지 않는다.
이는 단지 fullName은 계산해서 결과를 출력하는 데이터이기 때문에 firstName, lastName이 변경되지 않으면 fullName도 변경되지 않는다.
하지만 setter라는 개념을 활용하게 되면 데이터를 할당할 때 동작하는 새로운 로직을 중간에 추가할 수 있다.
get: 데이터를 조회할 때 동작하는 함수
set: 데이터를 지정할 때 동작하는 함수
watch
이미 선언한 반응형 데이터에서 감시하고 싶은 데이터와 동일한 이름으로 함수를 작성하면 해당 데이터를 감시하게되고 해당 데이터가 변경될 때 작성한 함수가 실행된다.
아래 예제에서는 firstName을 변경하였고 fullName은 firstName에 의존하고 있기 때문에 fullName 함수도 실행된 것을 볼 수 있다.
watch 옵션 내부에서 함수를 정의할 때는 2가지 매개변수를 받을 수 있다.
첫 번째 인수: 변경된 데이터
두 번째 인수: 변경되기 전의 데이터
deep
user라는 객체가 있고 watch 옵션 내부에 user라는 함수를 생성하였다.
user.age를 변경할 때는 watch가 동작되지 않고 user 자체를 변경하여야 watch가 동작된다.
따라서 객체, 배열 등의 참조형 데이터는 활용도가 떨어지게 된다.
이럴 때 deep 옵션을 사용해서 user를 더 깊게 감시할 수 있다.
depp 옵션을 사용할 때는 함수가 아닌 객체로 선언한 후 handler 함수 내부에 동작 할 로직을 작성한다.
deep 옵션을 true로 설정하면 user의 age를 변경하였을 때도 handler가 작동되는 것을 볼 수 있다.
이번에는 객체가 아닌 배열을 변경하는 예시를 살펴보자.
capitalize 버튼을 누르면 fruits 배열의 name을 모두 대문자로 바꾸는 예제이다.
마찬가지로 fruit의 name만 변경하므로 watch 내부의 함수가 작동되지 않는다.
deep 옵션을 사용해서 배열을 더 깊게 감시할 수 있다.
immediate
현재 watch 옵션은 페이지가 처음 렌더링 될 때(초기화)는 동작하지 않고 값이 변경되면 동작하고 있다.
immediate 옵션을 true로 설정하면 즉시 실행으로 만들 수 있다.
button을 클릭하지 않아도 watch가 동작하는 것을 볼 수 있다.
