[vue3] Watchers

watch

• 상태변경에 반응하여 “부수 효과”를 수행해야 하는 경우

• 예를 들어 DOM을 변경하거나 비동기 작업 결과에 따라 다른 상태를 변경하는 경우가

const obj = reactive({ count: 0 })

// 이것은 작동하지 않습니다. watch()에 숫자를 전달하고 있기 때문입니다.
watch(obj.count, (count) => {
  console.log(`Count는: ${count}입니다`)
})

// 대신, getter를 사용하십시오:
watch(
  () => obj.count,
  (count) => {
    console.log(`Count는: ${count}입니다`)
  }
)

깊은 감시자

• 객체의 모든 중첩된 속성을 순회하므로 대규모 데이터 구조에서 사용할 경우 비용이 많아질 수 있어요

• 필요할 때만 사용하고 성능에 미치는 영향에 주의하셔야 합니다.

Eager 감시자

watch(
  source,
  (newValue, oldValue) => {
    // 즉시 실행된 후, `source`가 변경될 때 다시 실행됩니다.
  },
  { immediate: true }
)

Once

watch(
  source,
  (newValue, oldValue) => {
    // `source`가 변경될 때 한 번만 트리거됩니다.
  },
  { once: true }
)

watchEffect

watch와의 비교

• 종송성 추적을 부수효과와 완전 분리하여 콜백 실행시기를 더 정확하게 제어가 가능

• 종속성 추적과 함께 관리되어 더 간결한 코드 , 가독성있는 코드를 작성하는데 이점이 있음.

콜백 플러시 타이밍

후처리 감시자

• Vue가 DOM을 업데이트한 후 소유자 컴포넌트의 DOM에 접근

// option 활성화
watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

// post용 메소드 제공
import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* Vue 업데이트 후 실행됨 */
})

동기 감시자

• 업데이트 이전에 동기적으로 실행되는 감시자

watch(source, callback, {
  flush: 'sync'
})

watchEffect(callback, {
  flush: 'sync'
})

import { watchSyncEffect } from 'vue'

watchSyncEffect(() => {
  /* 반응형 데이터 변경 시 동기적으로 실행됨 */
})

• 반응형 변이가 감지될 때 마다 트리거 되므로 배열과 같이 동기적으로 여러번 변경될 수 있는 데이터 소스에 사용을 지양해주세요!

감시자 중지

// 비동기적으로 로드될 데이터
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // 데이터가 로드될 때 무언가를 수행합니다.
  }
})