서론
반응형 데이터 이어서~
반응형 데이터
computed()
getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 반응형 ref 객체로 반환합니다. get과 set 함수가 있는 객체를 사용하면, 쓰기 가능한 ref 객체를 반환합니다.
즉, 변화 된 값을 단순하게 보여줄 때 사용하고 계산된 값을 출력합니다.
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0
watch
하나 이상의 반응형 데이터 소스를 감시하고, 소스가 변경되면 콜백 함수를 호출합니다.
데이터 변화를 감시하고 그에 따른 특정 동작을 수행할 수 있게 해주는 기능입니다.
첫 번째 인자는 감시될 소스입니다.
- 값을 반환하는 getter 함수
- ref
- 반응형 객체
- 또는 위에 나열한 것들의 배열
두 번째 인자는 소스가 변경되기 전 값입니다.
클린업 콜백은 다음에 이펙트가 다시 실행되기 직전에 호출되며, 무효화된 사이드 이펙트를 정리하는 데 사용할 수 있습니다. 예를들어 비동기 요청의 결과 대기중(pending)에 사용할 수 있습니다.
세 번째 인자로 옵션 객체를 받아 더 많은 제어를 가능하게 합니다.
- immediate: 감시자가 생성되는 즉시 콜백이 호출됩니다. 최초 호출 시, 이전 값은 undefined입니다.
- deep: 소스가 객체인 경우, 깊은 변경사항에서도 콜백이 실행되도록 합니다. 참고: 깊은 감시자.
- flush: 콜백의 발생(flush) 타이밍을 조정합니다. 참고: 콜백 실행 타이밍, watchEffect().
- onTrack / onTrigger: 감시자의 의존성을 디버그합니다. 참고: 감시자 디버깅.
watch(
() => myData.value,
(newValue, oldValue) => {
console.log(`값이 변경되었습니다. 이전 값: ${oldValue}, 새 값: ${newValue}`);
},
{
immediate: true, // 초기 로드 시에도 즉시 실행
deep: true, // 중첩된 객체나 배열의 변경도 감지
flush: 'post', // 'pre' 또는 'post' 중 언제 실행할지 선택 (기본값: 'pre')
}
);
watchEffect
즉시 함수를 실행하고 의존성을 반응적으로 추적하며, 의존성이 변경될 때마다 다시 실행합니다. 특정 데이터나 함수 등을 감시하고, 해당 대상이 변경될 때마다 자동으로 실행되는 효과를 만듭니다.
import { ref, watchEffect } from 'vue';
const myData = ref(0);
watchEffect(() => {
console.log(myData.value); // 데이터가 변경될 때마다 실행
});
// 데이터 변경
myData.value = 1; // 콘솔에 1 출력
watchEffect와 watch의 차이점은 watch는 좀더 정교하게 작업을 할 수 있습니다.
특정 데이터를 명시적으로 지정하고, 초기 실행 여부 등을 조절하려면 watch를 사용합니다.
데이터를 명시적으로 지정하지 않고, 그냥 변화에 반응하는 효과만 필요하다면 watchEffect를 사용합니다.
