MVC 및 MVVM 아키텍처 이해(JavaWeb 및 Vue 예제 사용)

머리말

모두가 MVC에 대해 알고 있지만 MVVM과 비교할 때 혼란스럽습니다. 다음은 JavaWeb을 사용한 MVC의 예와 Vue를 사용한 MVVM의 예입니다. MVC와 MVVM을 알아내십시오.

MVC 패턴(부분 백엔드, JavaWeb을 예로 들 수 있음)

MVC 패턴은 Java 웹 백엔드에 더 기울어진 디자인 패턴입니다. 이전 기사에서 이 모드와 SSM 프레임워크 간의 관계에 대해 이야기했습니다. 기사 링크는 아래와 같습니다.

MVC 아키텍처와 SSM 프레임워크의 관계

다음 2장의 사진은 위에서 찍은 것이며, 자세한 내용은 이 블로그로 바로 이동할 수 있습니다.

여기에 이미지 설명 삽입

여기에 이미지 설명 삽입

MVVM 모드(부분 프론트 엔드, Vue를 예로 들 수 있음)

이 모드는 프론트엔드 개념에 더 가깝기 때문에 이 모드를 이해하려면 프론트엔드 지식을 약간 알고 있어야 합니다. 여기서는 Vue만 예로 사용합니다.

MVVM을 설명하는 그림(그림은 Shang Silicon Valley 코스웨어에서 가져옴, 저는 2차 처리를 하고 있습니다):

여기에 이미지 설명 삽입

위 그림의 데이터 바인딩은 코드에 반영됩니다(VM을 통해 M은 View에 바인딩됨).

여기에 이미지 설명 삽입

위 이미지의 DOM 리스너는 코드에 구현되어 있습니다(VM에 의해 V를 M에 바인딩).

여기에 이미지 설명 삽입
실행 효과:

여기에 이미지 설명 삽입

동시에 M을 V에, V를 M에 바인딩하는 것은 양방향 바인딩을 달성하는 것입니다.

VM(즉, ViewModel)은 실제로 View와 Model 바인딩을 담당하는 Vue 인스턴스 자체입니다.

이것은 Vue!의 MVVM 구현입니다. 완전히 이해하려면 ViewModel, 양방향 바인딩 및 Vue 인스턴스에 대한 자세한 이해가 필요합니다. 다른 프론트엔드 프레임워크는 MVVM에 대한 해석이 다르지만 원칙과 아이디어는 동일합니다.

마지막으로 Wikipedia의 정의를 살펴보십시오.

Wikipedia에서는 다음과 같이 정의합니다.

추신

이 기사는 JavaWeb을 사용한 MVC 아키텍처와 Vue를 사용한 MVVM 아키텍처만을 반영합니다. 다른 기술 스택은 MVC 및 MVVM에 대한 해석이 다르지만 원칙과 아이디어는 동일합니다.

위의 내용은 개인적인 의견이며 토론 및 수정을 환영합니다.

추천

출처blog.csdn.net/weixin_44757863/article/details/123314190