watch, computed

 

 

computed

computed는 캐싱 효과가 있다. reversedMsg는 msg 데이터가 변경 될 때 계산해두고 계속 사용한다. msg가 변경되지 않으면 다시 계산되지 않는다.  다음과 같은 순서로 진행된다.

1. msg 변경

2. computed의 reveresedMsg 다시 계산

 

computed 의 set은 vm.reversedMsg ="new value~" 와 같이 변경할 때 사용된다. 

 

watch

watch는 Vue의 데이터가 변경될 때 작동하는 부분이다.

vm.msg = "bye bye" 로 변경하면 다음과 같이 동작한다.

 

1. vm.msg 가 "bye bye" 로 변경

2. watch의 msg()가 작동

3. computed의 reversedMsg에서 msg를 사용하므로 갱신됨.

4. watch의 reversedMsg() 작동

 

주의할 것은 감시할 데이터 이름과 watch의 함수 이름이 동일해야 한다.