VUE는 MVVM 패턴을 이용합니다. 이중 VM(ViewModel)계층에 집중한 프레임워크입니다.
따라서 MVVM 패턴 및 MVC, MVP패턴을 간단히 알아보고 vue에서의 MVVM에 대하여 알아보도록 하겠습니다.
MVVM 패턴
뷰가 특정 모델에 종속되지 않도록 모델(로직)을 분리한 패턴입니다.
간단히 뷰와 모델, 뷰모델을 분리하여 독립적인 개발을 할 수 있도록하여, 테스트, 유지 보수, 재사용성을 높인 패턴입니다.
구성요소
- 모델(Model) : 사용되는 데이터를 다루는 역할을 하며 비즈니스로직이 포함
- 뷰(View) : 말 그대로 보이는것, UI를 다루는 역할을 하며, 비즈니스로직이 아닌 UI로직(애니메이션)을 포함
- 뷰모델(View) : 뷰만을 위한 모델로 뷰가 사용하는 메서드,필드를 갖고 View에 상태 변화등을 알리며, 뷰가 사용할 수 있도록 데이터를 바인딩한다.
그렇다면 어떻게 VM과 V의 독립적이게 했을까?
Command패턴과 Data Binding을 통해 의존을 제거했습니다.
Command패턴은 객체의 메서드를 클래스로 캡슐화하는 패턴으로 A객체의 메서드를 B가 사용할 경우 A를 참조하는 의존성을 제거합니다.
(인터페이스를 통한 필수 구현 요소정의 -> 이를 구현한 기능 분리된 클래스(생성자로 객체를 받음) -> 객체 구현 => 사용! )
이는 뷰에서 필요한 메서드, 필드등을 모듈화하여 독립적으로 구현할 수 있도록 합니다.
Data Binding은 뜻 그대로 VIEW에서 사용할 데이터 및 뷰모델의 기능 등을 결합해주는 것입니다.
순서
ACTION --> V -(action 전달)-> VM -(데이터 요청, 데이터 변경 요청)-> M -(응답)-> VM -(Data Binding)-> V
VUE의 MVVM
VUE는 ViewModel계층에 집중한 프레임워크입니다. 뷰 모델을 통해 뷰 계층을 좀 더 간단하고 유연하게 개발하게 해줍니다.
1. 뷰모델을 통해서 양방향 데이터 바인딩을 가능하게 합니다
2. 컴포넌트 간 통신은 기본으로 단방향 데이터흐름으로 합니다.
- 모델(Model) : 데이터이며, 데이터 변경할 경우 Vue인스턴스에 변경을 알리며 vue의 getter/setters로 객체의 프로퍼티를 변환됩니다.
- 뷰(View) : UI요소이며, 뷰모델에 의해 관리됩니다. 뷰 요소는 vm.$el로 설정되어 Vue 인스턴스 생성당시에 컴파일되어 뷰모델의 메서드등이 바인딩됩니다.
- 뷰모델(View) : Vue 인스턴스는 뷰모델이며 뷰에 필요한 기능, 필드을 갖고 모델과 뷰를 연결하는 역할을 수행합니다.
참고자료
