3.Composition API기본(Watch , WatchEffect)

Vue3 공식사이트에는 watchEffect와 비교한 watch의 메리트를 다음과 같이 서술하고 있다.

 

-효율적인 실행

-watch의 재실행 조건의 명문화

-watch상태에 대한 변경 전후의 값 모두 액세스

 

뭔말이고..

 

개인적으로 조사해보고 알아낸 바에 따르면 , 공식사이트의 말과 크게 달라지지않지만 세 가지로 정리 해보았다.

 

차이!

 

1. 감시 대상을 정의하는 방법

2.watch는 변경전과 변경후의 값을 얻을 수있다.

3.초기 실행 타이밍

차례대로 알아봅시다.

 

1. 감시 대상을 정의하는 방법

watch는 감시할 객체를 첫번째 인수로 지정함.

watchEffect는 함수 안에서 사용되고 있는 리액티브 오브젝트가 감시대상.

  *리액티브 오브젝트란    reactive() , ref() 에 의해 정의된 오브젝트.

 

예를들어보면,

 

const { ref, watchEffect, watch } = require('vue')

 

const price = ref(100)

const count = ref(1)

let watchResult = 0

let watchEffectResult = 0

 

// 감시대상은 price,   count는 감시대상이아님

watch(price, () => {

  watchResult = price.value * count.value

})

 

// 감시대상은 price, count 둘다

watchEffect(() => {

  watchEffectResult = price.value * count.value

})

 

watch는 명시적으로 감시대상을 지정하고 있는 반면, 

watchEffect는 감시대상을 지정하지 않고있다.

 

2.watch는 변경전과 변경후의 값을 얻을 수있다.

watch(price, (newValue, oldValue) => {

  console.log({ newValue })

  console.log({ oldValue })

})

 

newValue 가 변경 된 후 의 값, oldValue가 변경 전의 값으로 콘솔에 찍어준다.

 

watchEffect에서 같은 것을 적용하려 한다면, 스스로 변경전과 변경후의 값을 정의해줄 필요가 있다. 

 

 

3.초기 실행 타이밍

watch의 초기 실행타이밍은 감시대상이 변화가 있을 때,

watchEffect는 정의 시 바로 실행. 항상 즉각적이라고 할 수있다.

 

 

 

이상. 

watch 와 watchEffect에 대해 간단히 알아보았다. 개념적인 부분에 치우쳐있기 때문에 실제적인 부분은

추후 더 자세히 알아본후에 정리하도록 하겠습니다!