본문 바로가기
Vue.js/Nuxt.js

Watch 사용 주의점

by 이도현 2021. 12. 15.

Nuxt에서 watch내의 함수를 정의 하면 변경하는 값을 감시한다.

회사에서 구축한 시스템에서 컴퍼넌트로 부터 넘어온 props 값을 watch가 캐치하지 못하는 현상이 있었는데,

원인을 파악하니 이해가 되었다. 

 

Watch내 의 함수를 선언할때, 함수의 파라미터를 하나만 설정하면 변경된 새로운 값을 이벤트로 받는다.

즉, 변경된 값이 존재하지 않으면 이벤트가 발생하지 않는다는 것이다.

만약 파라미터를 2개 둔다면 첫번째는 새로운 값, 두번째는 예전 값에 대해서 이벤트를 받게 된다.

 

즉, 부모 컴퍼넌트에는 다른 이벤트가 발생하여 props에 값을 넣었지만,

넣은 값이 기존값과 동일하다면 watch는 동작하지 않는다.