[vue js] mvvm 란?

정의 

Model + View + View Model

모델과 뷰 뿐만 아니라 뷰와 뷰 모델 간의 의존성까지 최소화한 형태로, UI가 실제 코드와 거의 완벽하게 분리된 것이 특징

MVVM 패턴의 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것입니다

 

• View : 사용자에서 보여지는 UI 부분입니다.
  
  • 유저 인터페이스
  • HTML/CSS/XML/YAML 등으로 작성
• View Model : View를 나타내기 위한 데이터 처리 (모델과 비슷하지만, 모델과 뷰사이, 모델보다는 적극적)
  • 상태와 연산(명령)
  • View의 실제 논리 및 데이터 흐름을 담당
  • 상태 데이터를 변경하면 즉시 View에 반영
  • 모델과 뷰 사이의 어댑터로서 변경이 생겼을 때 변경을 최소화할 수 있다.
• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리
  
  • 도메인 특화 데이터

장점

• 테스트하기 쉽다.
• UI 디자인이 나오지 않았더라도 미리 정의된 모델과 뷰 모델을 먼저 개발할 수 있기 때문에 병렬적인 업무 프로세스가 가능하다.

how

• View
  • 사용자에게 보여줄 틀, 구조

<div id="simple">
  <h2></h2>
</div>

• ViewModel
  • 뷰 객체이자 뷰모델 객체를 선언하여 뷰(구조) 와 모델(데이터)를 연결하고 보여줄 정보를 제어
  • 상태(state, 데이터)와 연산(operations, 메서드) 포함
  • 상태 데이터를 변경하면 즉시 View에 반영

var simple = new Vue({
  el : #simple,
  data : model
})

• Model
  • 보여줄 데이터를 담은 객체를 선언하고 저장

var model = {
  message : "hello!"
}

 

 

 

 

 

 

참고 출처

https://jobjava00.github.io/language/javascript/vuejs/mvvm/

[Vue.js] MVVM 패턴

https://velog.io/@k7120792/Model-View-ViewModel-Pattern

MVVM 패턴

https://namu.wiki/w/MVVM

MVVM - 나무위키