>웹 프론트엔드 >프런트엔드 Q&A >vue에서 mvvm과 mvc의 차이점은 무엇입니까

vue에서 mvvm과 mvc의 차이점은 무엇입니까

青灯夜游
青灯夜游원래의
2022-12-27 17:59:232298검색

mvvm과 mvc의 차이점: 1. mvvm의 각 부분 간의 통신은 양방향인 반면, mvc의 각 부분 간의 통신은 단방향입니다. 2. MVVM은 뷰와 모델 간의 자동 동기화를 실현합니다. 즉, 모델 속성이 변경되면 뷰의 표시를 변경하기 위해 DOM 요소를 수동으로 조작할 필요가 없습니다. 대신 속성을 변경한 후 뷰 레이어를 변경합니다. 해당 속성에 따라 자동으로 변경됩니다.

vue에서 mvvm과 mvc의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

MVC란 무엇입니까


MVC는 디자인 패턴입니다:

M(모델): 모델 레이어. 는 애플리케이션 데이터 로직을 처리하는 데 사용되는 애플리케이션의 일부이며, 모델 객체는 데이터베이스의 데이터에 액세스하는 역할을 담당합니다.
V(보기): View 레이어. 데이터 표시를 처리하는 애플리케이션의 일부입니다. 뷰는 모델 데이터
C(컨트롤러): 제어 레이어를 기반으로 생성됩니다. 컨트롤러는 사용자 입력을 받아들이고 사용자 요구 사항을 완료하기 위해 모델과 뷰를 호출하는 애플리케이션의 일부입니다. 단지 요청을 수신하고 요청을 처리하기 위해 호출할 모델 구성 요소를 결정한 다음 반환된 데이터를 표시하는 데 사용할 보기를 결정합니다.

vue에서 mvvm과 mvc의 차이점은 무엇입니까

vue에서 mvvm과 mvc의 차이점은 무엇입니까

Vue 프레임워크의 MVVM에서 MVVM


M은 백엔드 데이터이고, V는 노드 트리, VM은 나오는 Vue({}) 객체입니다. from new

M(모델) : 모델 레이어입니다. 은 비즈니스 로직과 관련된 데이터 개체로, 일반적으로 데이터베이스에서 매핑되며 데이터베이스에 해당하는 모델이라고 말할 수 있습니다.
V(보기): 레이어를 봅니다. 은 표시된 사용자 인터페이스입니다.
VM(ViewModel): 뷰 모델 레이어. 뷰와 모형을 연결하는 다리. 모델 레이어의 데이터는 뷰의 컨트롤에 직접적으로 대응할 수 없는 경우가 많기 때문에 뷰의 컨트롤에 구체적으로 대응하는 다른 데이터 개체를 정의해야 합니다. ViewModel의 책임은 모델 객체를 입력을 표시하고 받아들일 수 있는 인터페이스 데이터 객체로 캡슐화하는 것입니다.

vue에서 mvvm과 mvc의 차이점은 무엇입니까

View와 ViewModel은 양방향 바인딩으로 연결되어 있어 View(뷰 레이어)가 변경되면 자동으로 ViewModel(뷰 모델)로 업데이트되고, 그 반대도 마찬가지입니다.

vue에서 mvvm과 mvc의 차이점은 무엇입니까

MVVM의 장점

1. MVC와 mvvm은 모두 디자인 아이디어입니다. 가장 중요한 것은 mvc의 컨트롤러가 mvvm의 viewModel로 발전한다는 것입니다. mvvm은 주로 mvc에서 많은 수의 DOM 작업으로 인해 페이지 렌더링 성능이 저하되고 로딩 속도가 느려지는 문제를 해결합니다.

2. MVVM과 MVC의 가장 큰 차이점은 View와 Model의 자동 동기화를 실현한다는 것입니다. Model의 속성이 변경되면 더 이상 View의 표시를 변경하기 위해 Dom 요소를 수동으로 조작할 필요가 없습니다. 자동으로 변경됩니다.

3. 전반적으로 MVVM은 MVC보다 훨씬 간단합니다. DOM을 자주 작동하기 위해 더 이상 선택기를 사용할 필요가 없습니다.

MVVM은 C를 VM으로 완전히 대체하지 않습니다. ViewModel의 목적은 Controller를 대체하는 것이 아니라 Controller에 표시되는 비즈니스 로직을 추출하는 것입니다.

MVC와 MVVM의 차이점은 무엇인가요?


차이점 1:

mvvm의 각 부분 간의 통신은 양방향이지만 mvc의 각 부분 간의 통신은 단방향입니다.

차이점 2:

MVVM과 MVC의 가장 큰 차이점은 View와 Model의 자동 동기화를 구현한다는 것입니다.

  • Model 속성이 변경되면 디스플레이를 변경하기 위해 Dom 요소를 수동으로 조작할 필요가 없습니다. 보기의.

  • 속성을 변경하면 해당 속성에 해당하는 View의 표시가 자동으로 변경됩니다

MVVM 반응 원리


  • vue는 게시자-구독자 모델과 함께 데이터 하이재킹을 사용하고,
    • 각 속성의 getter 및 setter를 하이재킹하여 Object.defineProperty()를 통해
    • 언제 데이터가 변경되면 종속성 수집기(dep의 하위)에 메시지를 게시하여 관찰자에게 알리고 해당 콜백 함수를 만들고 뷰를 업데이트합니다
  • MVVM은 바인딩의 진입점 역할을 하며 Observer, Compile 및 Watcher를 통합합니다. ,
    • Observer를 사용하여 모델 데이터 변경 사항 모니터링,
    • Compile을 사용하여 컴파일 템플릿 지침 구문 분석,
    • 마지막으로 Watcher를 사용하여 Observer와 Compile 간의 통신 브리지 구축,
    • 데이터 변경 달성 Observer) => 업데이트 보기 ; 대화형 변경 보기 => 데이터 모델 변경의 양방향 바인딩 효과 .

【관련 추천: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발

위 내용은 vue에서 mvvm과 mvc의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.