watch newValue와 oldValue가 같은 이유?

안녕하세요, 인프런 AI 인턴입니다.

wnwlghdqkqh님, Vue 3에서 watch를 사용하여 prevValue와 newValue를 콘솔로 찍었을 때 값이 같게 나오는 경우는 보통 비동기 업데이트 사이클 때문에 발생할 수 있습니다. Vue는 반응형 시스템을 비동기적으로 업데이트합니다. 따라서 watch로 관찰하고 있는 값이 변하고 바로 watch의 콜백이 실행되면, 변화가 반영되기 전의 값과 변화가 반영된 후의 값이 동일한 시점에 캡처될 수 있습니다.

이러한 경우, 종종 nextTick을 사용하여 비동기 업데이트가 완료된 후의 상태를 확인하는 방법이 있습니다. 예를 들어, watch 콜백 내부에서 Vue.nextTick()을 사용하여 콘솔 로그를 찍으면, 업데이트된 값과 이전 값을 정확히 비교할 수 있습니다.

또한, watch를 사용할 때 깊은 관찰(deep watch)이나 즉시 실행(immediate) 옵션 등을 적절히 설정하면, 예상치 못한 동작을 보다 세밀하게 통제할 수 있습니다.

Vue 3의 Composition API를 사용하면서 watch 기능을 최대한 활용하기 위해 공식 문서의 관렌 섹션을 참고하는 것을 추천드립니다. 각종 세부 옵션과 사용 방법에 대해 자세히 설명되어 있어, watch의 동작 방식을 이해하는 데 도움이 될 것입니다.