profile
FE 개발 기록들을 정리해 놓은 이솝개발일지입니다.
post-thumbnail

watch 와 watchEffect의 차이점

vue.js에서 새로 나온 watchEffect가 기존의 watch와 무엇이 다른지확인한다. 기존 Vue2에서는 watch를 단순 변수 감시용으로 사용하였다. 이미 지정되었던 변수를 지켜보고있는 존재로서, 변경 전 후의 값을 모두 참조할 수 있다는 특징을 지닌다. 하지만, 할당전의 상태에서 초기값을 설정해주는 과정의 변화는 감지하지 못하는 한계점이 있었다. 이러한 한계점을 watchEffect에서는 해결할 수 있다. 또한, 계속해서 감시하고있는 watch의 무거운 특성을, 좀더 가볍게 하기 위해 stop()함수를 통해 감시 중단도 가능하도록 하였다. 추가적으로, flush라는 속성이 있는데,이는 callback함수를 언제 호출 할 지를 명시해주는 역할로, 순서를 명확하게 할 수 있다는 장점이 있다. flush 속성은 DOM이 업데이트 하기 전에 콜백함수를 호출하는pre를 기본값으로 가지며, DOM이 업데이트된 후 콜백함수를 호출하는 post값도 가지게 된다. vue2기반으

2022년 6월 20일
·
0개의 댓글
·