Vue reactivity

신기하게도 Vue에 있는 데이터가 변경될 때 이와 관련된 html에 자동으로 반영된다. 이는 Vue를 사용하는 큰 이유 중에 하나이다. 

 

위의 반응성을 제공하기 위해서는 해당 데이터를 data에 등록해두어야 한다.  

다음 예제를 보면서 비교해보고 반응성을 위해서 코딩을 어떻게 사용해야 하는지 주의하자. 

 

 

위 코드를 적고 실행한 후에 Change 버튼을 누른다.

이후 개발자 도구 콘솔에서 vm.msgB= ""와 vm.msgA = ""를 실행한다. 그러면 msgB가 html 코드 상에 반영되지 않음을 파악할 수 있다.

 

다 실행 한 후의 화면은 다음과 같다.