[Udemy Vue 완벽가이드 Section5] 60. Vue의 반응성 소개

본질적으로 Vue는 중요한 일을 하나 한다. 바로,

data에 정의된 내용을 Vue가 지속적으로 추적한다.

즉, data객체를 반응형 data객체로 바꾼다.

data객체의 모든 property를 JavaScript의 기능인 Proxy로 래핑해서 '반응형 data 객체'로 바꾼다.

 

Vue는 이 data객체의 모든 property를 전역 property와 합쳐서 내부에서 관리하는 하나의 객체로 만든다.

이때, 메서드도 해당 객체에 합쳐진다. 이런 작업들이 Vue의 내부에서 이루어진다.

또한 this가 해당 전역 객체를 가리키도록 한다. 

(여기서 '전역 객체'란, Vue함수로 만든 Vue 인스턴스를 의미.)

 

 

그럼, 어떻게 data에 정의된 내용을 Vue가 추적할까?

JavaScript에는 내장 기능인 Proxy가 있다. Vue가 내부에서 이 Proxy를 활용하여 data의 property를 래핑하고, 변수 message에 새 값이 할당될때마다 알리는 작업을 한다.

1/ message에 새로운 값을 설정할 때마다 Vue가 그걸 알아차린다. (Vue가 message변수에 새로운 값이 할당되는걸 모른다면, 화면에 나오는 내용을 업데이트 할 수 없다.)

2/ Vue가 변경사항이 있다는 것을 인식하면, 제어하는 HTML 코드를 스캔하고, 변경사항이 있는 프로퍼티가 있음을 확인한다.

3/ 사용자가 보는 화면이 될 렌더링된 페이지에서 해당 동적 콘텐츠가 표시되는 올바른 위치를 찾은 다음, 변경 사항에 따라 화면에 나오는 페이지를 업데이트 한다.

 

-> Vue 내부에서 실행하는 내장 반응성 기능