본문 바로가기
Frontend

[VUE.JS] vue.js에서 데이터 변화를 감지하는 watch()

by Dddu 2024. 9. 21.

담당업무 중 프론트가 vue.js로 되어있는데  데이터 변화할 때 마다 특정 부분을 변경해줘야 했는데

watch()로 해결하였다. vue.js를 벗어날 수 없으니 공부를 열심히 해봐야겠다 . . .... 

 

Vue.js의 watch()는 무엇인가 ?

-> 데이터가 바뀔 때 특정 코드를 실행할 수 있게 해주는 기능이며, 데이터 변화를 감지하고 그에 맞춰 동작을 수행할 수 있다.

watch() 안에 변수를 넣고 화살표 함수를 사용하면 특정 데이터 속성을 감시할 수 있다 

주의사항! !

  • this의 바인딩: 화살표 함수에서는 this가 바뀌지 않으므로, Vue 인스턴스의 데이터나 메소드를 사용하려면 this를 적절하게 사용해야 한다. 

javascript의 관찰자 패턴 또는 이벤트 리스너와 비슷한 거 같다.

(데이터나 상태의 변화를 감지하고 그에 따라 특정 동작을 수행하는 방식)