Vue.js MVVM과 반응형 시스템

MVVM(Modeled-View-ViewModel)

Vue.js는 MVVM 패턴에 영향을 받았습니다. MVVM 패턴이란 UI와 데이터 처리를 분리하는 아키텍처 패턴입니다. UI와 데이터 간의 바인딩을 통해 개발자가 직접 UI를 업데이트할 필요 없이 데이터와 UI를 자동으로 동기화할 수 있습니다.

MVVM 패턴은 데이터 모델(Model), 뷰(View) 및 뷰 모델(ViewModel)로 구성됩니다. 이때 ViewModel은 View와 Model 상시에서 데이터를 주고 받는 역할을 합니다. Vue.js에서는 Vue 인스턴스가 이런 역할을 수행합니다. Vue 인스턴스는 Model(data)와 View(template)을 연결하고, 이를 바인딩하여 데이터와 UI를 동기화합니다.

 

• View: 사용자 인터페이스(UI)를 담당합니다. 뷰는 데이터의 변화를 감지하고, 변경된 데이터를 적용하여 UI를 업데이트합니다.
• ViewModel: 뷰와 데이터 모델 사이의 매개체 역할을 합니다. 뷰 모델은 뷰의 데이터를 바인딩하고, 데이터 모델의 변경 사항을 감지하여 뷰를 업데이트합니다. Vue.js에서 뷰 모델은 Vue 인스턴스로 표현됩니다.
• Model: 애플리케이션의 데이터를 담당합니다. 데이터 모델은 애플리케이션의 상태를 나타내며, 변경 사항을 감지하여 뷰 모델에 알립니다.

 

Vue.js의 MVVM 패턴은 뷰와 뷰 모델 간의 양방향 데이터 바인딩을 통해 UI와 데이터를 동기화합니다. 이를 통해 데이터와 UI 간의 결합도를 낮출 수 있으며, 코드의 가독성과 재사용성을 높일 수 있습니다.

 

---

반응형 시스템

Vue.js에서는 데이터와 뷰가 동기화되는 반응형 데이터 바인딩 시스템을 구현한 방법은 대략적으로 다음과 같습니다.

 

• Vue 인스턴스가 초기화될 때, Vue.js는 Object.defineProperty() 메서드로 데이터 객체의 속성에 대해 getter와 setter를 정의하여 data 객체의 모든 프로퍼티를 반응형으로 만듭니다.
• Vue.js 내부적으로 옵저버 디자인 패턴을 구현하여 의존성을 수집하고 데이터가 변경될 때 와처(watcher)에 알립니다. Vue 인스턴스가 생성될 때, 데이터 객체를 감시하기 때문에 변경이 발생한 경우 Vue.js는 자동으로 UI를 업데이트 합니다.

출처-https://v2.ko.vuejs.org/v2/guide/reactivity.html