VUE는 여러 디자인 패턴 중 하나인 MVVM패턴을 사용하는 프레임워크다.

VUE는 MVVM 패턴의 ViewModel에 집중한 프레임워크이다.
프론트엔드 개발환경이 복잡해지면서 여러 디자인 패턴의 사용이 필요하게 되었고 그중 하나가 MVVM패턴이다.
UI를 비즈니스 로직과 분리해 효율적인 유닛테스트, View와 Model의 독립성 유지 등 장점을 얻는다.

MVVM 패턴

Model-View-ViewModel의 약자이다.

View,Model,ViewModel 3가지로 구성되어 있다.

View

사용자에게 보이는 UI에 관한 것들이 모여있다.
유저에게 인터랙션(클릭,입력 등)을 받으면 ViewModel에게 데이터 바인딩을 통해 전송한다.

ViewModel

View에 대한 추상화.
View가 보여줘야하는 데이터와 코드를 가지고있는데, View가 ViewModel을 옵저빙하는 형태로 바인딩 되어있어 자동적으로 업데이트가 된다.

Model

실제 데이터, 비즈니스 로직 등을 가지고있다.

장점

• View와 Model의 독립성 유지
• 코드 유지보수의 편리함
• 효율적인 유닛 테스트

단점

• 쉽고 단순한 프로젝트에서는 적합하지 않음
• 데이터 바인딩이 필수이기 때문에 프로그램이 커지면 메모리 소모가 굉장히 커짐

Vue의 MVVM패턴

(출처 : https://012.vuejs.org/images/mvvm.png)

Vue.js에서의 MVVM을 나타낸 그림이다.
자바스크립트가 Model의 역할, 돔이 View의 역할을 하며 ViewModel의 역할을 Vue.js가 한다.

DOM Listeners(돔 리스너) : 돔의 변경 내역을 즉시 반영하여 특정 로직을 수행하는 장치

Virtual DOM

DOM 요소들이 늘어나면 자바스크립트로 돔을 핸들링하는 과정에서 부하가 많이 생기는데 Virtual DOM을 통해서 부하를 줄이고 화면 렌더링을 빠르게 하는 장점을 가져올 수 있다.

참고자료
모델-뷰-뷰모델