<root> 인스턴스를 선택해도 vue-devtools에 나열된 속성을 볼 수 있습니다. 이제 그림 2-8에서 자바스크립트 콘솔에 setter를 사용하여 sitename 값을 설정하면 무슨 일이 일어나는지 봅시다.

sitename에 새로운 값을 입력하고 Enter를 누르면 헤더 요소의 결괏값이 자동으로 바뀝니다. 이것이 바로 Vue의 이벤트 루프입니다. Vue 생명 주기를 보면서 언제, 어떻게 데이터가 웹 페이지를 변화시키는지 알아보겠습니다.

▲ 그림 2-8 Vue의 속성 getter와 setter를 사용하여 sitename을 보여 주고 변경