감시자

설명

🔖 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+)
}

사용법

reactive를 사용할 경우

() => managerFormValue.managerId와 같이 함수를 사용하여 managerFormValue.managerId를 감싸야 한다.

watch(() => managerFormValue.managerId, () => {
  clearError();
});

차이점을 알겠는가? 모르면 그냥 이렇게 써라.

ref를 사용할 경우

ref로 만들어진 경우에는 .value속성에 실제 값을 가지고 있으므로 직접적으로 사용할 수 있다.

watch(managerFormValue.managerId, () => {
  clearError();
});

watch 함수의 두가지 형태

1. 단일 속성을 감시할 경우

watch(
  () => managerFormValue.managerId,
  (newValue, oldValue) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

managerFormValue.managerId의 값이 변경될 때마다 두 번째 인자로 전달된 콜백 함수가 실행, 이 콜백 함수는 새 값(newValue)과 이전 값(oldValue)을 인자로 받아 실행된다.

2. 여러 속성 감시할 경우

watch(
  [() => managerFormValue.managerId, () => managerFormValue.managerPwd],
  (newValues, oldValues) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

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');
  }
});