[Vue] Watch, WatchEffect

Watch

반응형 상태가 변경되었을 때 감지합니다.

특정 데이터가 변경되었을 때 특정 작업을 수행할 수 있습니다.

 

ref

const message = ref('Hello Woeld')
const x = ref(0)
const y = ref(0)

watch(message, (newValue, oldValue) => {
  console.log(newValue)
  console.log(oldValue)
})

또는

watch(() => x.value + y.value, (sum, oldValue) => {
  console.log(sum)
  console.log(oldValue)
})

 

 

array

const x = ref(0)
const y = ref(0)

watch([x, y], ([newX, newY]) => {
  console.log(newX, newY)
})

 

 

reactive

object type을 감시할 때는 같은 객체를 감시하고 있기 때문에 newValue와 oldValue가 같은 값을 나타냅니다.

객체 전부를 감시할 수 있지만 하나의 값만 감시하고 싶다면 getter 함수를 이용하여 감시하면 됩니다. () => obj.count

const obj = reactive({
  count: 0
})

watch(obj, (newValue, oldValue) => {
  console.log(newValue)
  console.log(oldValue)
})

또는

watch(() => obj.count, (newValue, oldValue) => {
  console.log(newValue)
  console.log(oldValue)
})

 

 

immediate 옵션

watch는 데이터 변경을 감지하고 callback 함수를 실행하지만 즉시 실행하고 싶을 때 immediate 옵션을 사용하면 됩니다.

const message = ref('Hello World')

watch(
  message,
  (newValue) => {
    console.log('즉시실행')
  },
  { immediate: true, }
)

 

 

WatchEffect

callback 함수 안에 반응형 데이터가 변경되면 자동으로 실행됩니다.

watch와는 다르게 최초 1번 즉시 실행합니다.

const title = ref('')
const contents = ref('')

const saveText = (title, contents) => {
  console.log(`저장되었습니다. title: ${title}, contents: ${contents}`)
}

watchEffect(() => {
  save(title.value, contents.value)
})

 

 

watch는 데이터를 명시적으로 관찰하지만 watchEffect는 callback 함수 안에서 사용한 반응형 데이터를 관찰합니다.

사용 시 상황에 맞게 watch와 watchEffect를 사용하면 됩니다.