[ VueJS 입문 ] Computed VS Watch 언제써야할까?

• Computed VS Watch (공식사이트 - computed와 watch)

계산된 속성인 computed와 비슷한 역할을 하는 watch가 있다. 두가지의 차이점과 목적에 맞게 사용할 수 있도록 알아보자.

 

• 감시자, watch - https://jsfiddle.net/sunghun/th2m9ws7/60/

샘플을 보면 @click 디렉티브로 count가 1씩 감소하는 내용이다. Javascript부분을 보면 watch가 존재한다. Data에 선언된 count가 watch안에도 그대로 선언되어 있다. 그래서 기존의 값과 변환한 값을 감시하는 역할을 합니다. 클릭이 되어질때마다 현재값과 변경값을 반환한다.

 

• 차이 - https://jsfiddle.net/sunghun/th2m9ws7/68/

샘플을 보면 count가 감소할때 computed는 count가 2가되면 얼랏창을 띄우고, watch는 count의 값이 0이되면 얼랏창을 띄우게 작성 되어 있다. Html 부분에서 computed로 선언된 {{ calculated }} 내용의 주석을 없애줘야 숫자 2일때 얼랏창이 들어온다. 그러나 watch로 선언된 내용은 별도의 값을 넣지 않아도 count 자체의 변화를 읽어 얼랏창을 띄운다.