[Vue3] watch, watchEffect 기능 및 차이점

Vue3 중 watch, watchEffect 기능 설명과 차이점

생각보다 실무에서 유용하게 사용되어 따로 정리해 두었다. 

 

 

1. watch 란?

• 특정 반응형 상태(reactive state)를 관찰하고, 상태가 변경될 때 실행되는 콜백을 정의
• 대상을 명시적으로 지정해야 됨
• 최초 한 번은 실행이 되지 않기 때문에 immediate 로 즉시 실행을 할 수 있음

const msg = ref('');

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

            // 값이 변경이 되면

            // DOM 을 조작하거나

            // API 호출을 하거나~ 등등

            // Type은 ref, reative, computed, array 등 다양한 type 가능

            console.log('newValue : ', newValue)

            console.log('oldValue : ', oldValue)

        });

 

개발자툴 > Vue > msg 변수의 값을 변경해 보면 newValue, oldValue의 값이

콘솔에 찍히는 것을 확인 할 수 있음. 

 

ref로 선언된 msg 변수의 값이 변경되면 이후 정의된 콜백 함수가 실행 됨.

 

        watch(msg,

            newValue => {

                reverseFunction(newValue)

            },

            {

                immediate: true

            }

        )

이런 식으로 immediate true를 주면 최초 한 번 실행이 됨

 

 

 

2. watchEffect

• 반응형 상태를 자동으로 추적하여 변경될 때 실행함
• 의존성을 명시하지 않아도 Vue가 자동으로 추적함
• 최초 한 번 자동 실행 됨

        watchEffect(() => {

            console.log(title.value)

            console.log(contents.value)

            save(title.value, contents.value);

        })

 

watchEffect를 이렇게 선언해 주면 title과 contents의 값이 변경될때 

Vue가 자동으로 감지하여 콜백에 정의된 save 함수를 호출 시킴

 

 

3. 차이점

특징	watch	watchEffect
의존성 설정	관찰할 대상을 명시적으로 설정	Vue가 자동으로 추적
초기 실행 여부	기본적으로 초기 실행 안 함 (immediate : true 설정 시 실행)	항상 즉시 실행
설정 간편함	대상과 콜백을 명시적으로 정의해야 함	설저잉 간단하며 자동 추적
사용 목적	특정 상태를 정밀하게 추적(deep, oldValue 필요 시)	모든 반응형 상태를 간단히 추적
비동기 취소	지원	지원