watch 와 watchEffect의 차이점

vue.js에서 새로 나온 watchEffect가 기존의 watch와 무엇이 다른지확인한다.

기존 Vue2에서는 watch를 단순 변수 감시용으로 사용하였다.
이미 지정되었던 변수를 지켜보고있는 존재로서, 변경 전 후의 값을 모두 참조할 수 있다는 특징을 지닌다.
하지만, 할당전의 상태에서 초기값을 설정해주는 과정의 변화는 감지하지 못하는 한계점이 있었다.

이러한 한계점을 watchEffect에서는 해결할 수 있다.
또한, 계속해서 감시하고있는 watch의 무거운 특성을, 좀더 가볍게 하기 위해 stop()함수를 통해 감시 중단도 가능하도록 하였다.
추가적으로, flush라는 속성이 있는데,이는 callback함수를 언제 호출 할 지를 명시해주는 역할로, 순서를 명확하게 할 수 있다는 장점이 있다. flush 속성은 DOM이 업데이트 하기 전에 콜백함수를 호출하는pre를 기본값으로 가지며, DOM이 업데이트된 후 콜백함수를 호출하는 post값도 가지게 된다.

vue2기반으로 된 프로젝트를 진행하면서, 초기 셋팅에 store에서 불러온 후 수정하는 경우, 해당 파일에서 한 번 더 변경해주는 상황이였을때, watch가 제대로 기능하지 못하는 문제가 있었는데, watchEffect를 사용하면 간단하게 해결 될 것 같다.