.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
watch
Type
// 하나의 소스 감시
function watch<T>(
source: WatchSource<T>,
callback: WatchCallback<T>,
options?: WatchOptions
): StopHandle
// 여러 개의 소스 감시
function watch<T>(
sources: WatchSource<T>[],
callback: WatchCallback<T[]>,
options?: WatchOptions
): StopHandle
type WatchCallback<T> = (
value: T,
oldValue: T,
onCleanup: (cleanupFn: () => void) => void
) => void
type WatchSource<T> =
| Ref<T> // ref
| (() => T) // getter
| T extends object
? T
: never // 반응형 객체
interface WatchOptions extends WatchEffectOptions {
immediate?: boolean // 기본 값: false
deep?: boolean // 기본 값: false
flush?: 'pre' | 'post' | 'sync' // 기본 값: 'pre'
onTrack?: (event: DebuggerEvent) => void
onTrigger?: (event: DebuggerEvent) => void
once?: boolean // 기본 값: false (3.4+)
}
TypeScript
복사
사용법
reactive를 사용할 경우
() => managerFormValue.managerId와 같이 함수를 사용하여 managerFormValue.managerId를 감싸야 한다.
watch(() => managerFormValue.managerId, () => {
clearError();
});
TypeScript
복사
차이점을 알겠는가? 모르면 그냥 이렇게 써.
ref를 사용할 경우
ref로 만들어진 경우에는 .value속성에 실제 값을 가지고 있으므로 직접적으로 사용할 수 있다.
watch(managerFormValue.managerId, () => {
clearError();
});
TypeScript
복사
watch 함수의 두가지 형태
1. 단일 속성을 감시할 경우
watch(
() => managerFormValue.managerId,
(newValue, oldValue) => {
// 속성 값이 변경될 때 실행되는 로직
}
);
TypeScript
복사
managerFormValue.managerId의 값이 변경될 때마다 두 번째 인자로 전달된 콜백 함수가 실행, 이 콜백 함수는 새 값(newValue)과 이전 값(oldValue)을 인자로 받아 실행된다.
2. 여러 속성 감시할 경우
watch(
[() => managerFormValue.managerId, () => managerFormValue.managerPwd],
(newValues, oldValues) => {
// 속성 값이 변경될 때 실행되는 로직
}
);
TypeScript
복사
managerFormValue.managerId와 managerFormValue.managerPwd 두 속성의 변경을 함께 감시하고 있으며, 이 경우 콜백 함수는 감시 중인 모든 속성의 새 값들(newValues)과 이전 값들(oldValues)을 Array 형태로 받아 실행된다.
watch를 사용해도 바로 반영되지 않을 때, 비동기처리할 때
데이터를 실시간으로 확인하면서 비동기처리하여 작업하려 하였으나, 바로 감지하지 못하였을 때 해결하는 간단한 방법은 nextTick() 사용하기!
nextTick() : Vue 컴포넌트에서 비동기 작업을 처리하고, 해당 작업이 DOM 업데이트 사이클과 연관이 있을 때 사용하는 메서드
변경되는 데이터를 통해, 호출되는 모든 API를 확인하고, API가 모두 처리 되면 작업을 수행하도록 하고 싶었다.
watch(searchDate, async () => {
await nextTick();
try {
emitter.emit('showLoading');
await callApis();
} catch (err) {
handleApiError(err);
} finally {
emitter.emit('hideLoading');
}
});
TypeScript
복사
