[Vue3] Watch

Watch는 Obverving 상태의 값이 변경 될 경우 동작시키는 logic을 사전에 정의하여 사용 할 수 있습니다. 

watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = '생각 중...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer === 'yes' ? '네' : '아니오'
    } catch (error) {
      answer.value = '에러! API에 연결할 수 없습니다. ' + error
    }
  }
})

 

또한 단일 변수가 아닌 getter 등 여러 타입을 감지하여 사용할 수 있습니다.

// 단일 ref
watch(x, (newX) => {
  console.log(`x값: ${newX}`)
})

// getter
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`x + y: ${sum}`)
  }
)

// 여러 소스의 배열
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x는 ${newX}이고, y는 ${newY} 입니다.`)
})



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

// 반응형을 잃어버린 count의 literal data가 아닌 
// 아래와 같이 getter를 이용하여 구현할 수 있습니다.
watch(
  () => obj.count,
  (count) => {
    console.log(`count 값: ${count}`)
  }
)

 

Object in Array, Array in Array, Object in Object 등 2Depth의 감시가 필요한 경우 deep 옵션을 사용합니다.

const state = reactive({
  someObject: { count: 0 }
})

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // 참고: 
    // state.someObject가 교체되지 않는 한 여기에서
    // `newValue`와 `oldValue`는 같습니다.
  },
  { deep: true }
)

 

감지된 소스가 변경되전에 최초 데이터가 구성된 후 콜백실행을 원할 경우 immediate : true 옵션을 사용합니다.

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

 

watch 동작 시 초기 데이터를 1회 가져온 뒤 값이 변경될 때 마다 데이터를 다시 가져오기를 원할 경우 아래와 같이 WatchEffect를 사용하여 구현할 수 있습니다.

const url = ref('https://...')
const data = ref(null)

async function fetchData() {
  const response = await fetch(url.value)
  data.value = await response.json()
}

// 즉시 데이터 가져오기
fetchData()
// ...그런다음 url 변경을 감시하도록 watch를 실행합니다.
watch(url, fetchData)


//위 동작을 아래 watchEffect로 구현할 수 있다
watchEffect(async () => {
  const response = await fetch(url.value)
  data.value = await response.json()
})

 

Watch는 Vue Component가 업데이트 이전에 동작되는데, 이를 업데이트 이후 watch Callback을 동작시키길 원한다면 (업데이트된 DOM 접근 필요 시) fluch 옵션을 사용할 수 있습니다.

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

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

 

참조 : https://v3-docs.vuejs-korea.org/guide/essentials/watchers.html#callback-flush-timing