뷰의 반응성 (Vue Reactivitiy)

• 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성
• 데이터가 변경되었을 때 어떻게 뷰에서 자동으로 화면을 갱신하는가?
  • 인스턴스가 생성될 때 data 속성에 정의된 객체들은 특정 변환 작업을 거친다.
  • 라이브러리에서 data에서 정의된 모든 속성(객체)을 getter, setter의 형태로 변환하는 것을 말한다.
  • getter, setter는 뷰 인스턴스에 정의해 놓은 data 속성에 변화가 생길 때 뷰에서 감지하기 위해 라이브러리 내부적으로 필요한 속성이다.
    • getter와 setter를 변환할 때는 자바스크립의 내장 API인 Object.defineProperty()가 사용된다.
  • watcher는 모든 컴포넌트에 존재하는 속성이고, 화면을 다시 그리는 데 중요한 역할을 한다. 예를 들어, 인스턴스가 화면에 올라가고 나서 특정 data 속성을 바꾸거나 접근하면 watcher에서 해당 사실을 감지하고 다시 화면을 그리라는 신호를 보낸다.
• 인스턴스 data 속성에 반응성이 생기는 시점은 인스턴스를 생성하는 시점이다.
• 따라서 인스턴스를 정의할 때 data 속성에 정의하지 않고 인스턴스를 생성하고 난 후 data 속성에 객체를 추가하면 그 객체에는 반응성이 생기지 않는다. (객체의 변화가 있든 없든 뷰에서 화면을 다시 갱신하지 않는다는 의미)
• 뷰의 반응성 공식 가이드

Object.defineProperty()

반응형에 대해 깊이 알아보기 — Vue.js