[Vue.js] MVVM 패턴과 동작과정

MVVM 패턴 / 디자인패턴 / MVVM 동작과정 / MVC / MVP / Vuejs 디자인패턴

 

MVC는 들어봤는데 MVVM은 무엇일까?
기회가 된다면 다음에 MVC, MVP, MVVM 을 공부하여 포스팅하겠다.

 

디자인 패턴이 뭐지?

프로그램 개발시 자주 나타나는 문제를 해결하기 위한 방법이나 규약을 묶어 이름을 붙인것.
특정 디자인 패턴의 규칙대로 개발을하면 협업하기 수월하며 유지보수하기 좋다. 

Vue.js로 웹을 개발하는 방식이 MVVM 디자인 패턴이다!

 

MVVM 패턴

세가지로 역할을 구분하여 웹 개발을 수행한다.

Model : 데이터 처리 코드
View : 화면상 보여지는 UI 코드
ViewModel : View 와 Model을 잇는 코드

여기서 Vue.js는 ViewModel 부분을 담당한다.

 

MVVM 동작과정

1. 사용자가 View를 통해 입력한다.
2. View에서 이벤트 발생시, View Model 의 콜백 함수를 호출한다.
3. ViewModel은 Model에게 필요한 데이터를 요청하고, 전달 받는다.
4. ViewModel은 전달받은 데이터를 가공하여 저장한다.
5. ViewModel에서 저장하면, Binding으로 View값이 갱신된다.

 

[Vue.js] Virtual DOM (가상 돔) 개념과 동작방식