Vue.js 및 MVVM에 대한 참고 사항

MVVM은 Model-View-ViewModel의 약자로 View Model의 상태 변경을 가능하게 하는 View와 View Model의 양방향 데이터 바인딩을 제공하는 것이 핵심입니다. View에 자동으로 전달되는 것을 양방향 데이터 바인딩이라고 합니다.

Vue.js는 View 레이어를 중심으로 MVVM 스타일의 양방향 데이터 바인딩을 제공하는 Javascript 라이브러리입니다. 그 핵심은 ViewModel인 MVVM의 VM입니다. ViewModel은 View와 Model을 연결하여 뷰와 데이터의 일관성을 보장하는 역할을 합니다. 이 경량 아키텍처는 프런트 엔드 개발을 보다 효율적이고 편리하게 만듭니다.

MVVM은 왜 등장하나요?

제가 MVVM을 접한 것은 2015년입니다. 2015년은 MVVM의 가장 뜨거운 해였다고 할 수 있겠습니다. 그 전에는 MVC가 나온지 5년 정도 전, 즉 2011년이라는 것 밖에 없었습니다. 어렸을 때 접하게 됐고, 그때 막 프로그래밍 언어도 배웠고, 자바도 배웠고, 자바의 고전적인 SSH 프레임워크를 사용해 표준 MVC 아키텍처를 구축했습니다. 솔직히 저는 MVC 아키텍처를 수년 동안 사용해왔지만 그것에 대해 깊이 이해한 적은 없었습니다. Vue.js를 접하고 공부한 정도였습니다. MVVM 아키텍처 아이디어를 보다가 문득 깨닫게 된 MVC의 느낌~

MVC는 Model-View-Controller의 약자로 Model-View-Controller를 의미합니다. 표준 웹 애플리케이션은 다음 세 부분으로 구성됩니다.

뷰는 어떤 방식으로든 사용자에게 데이터를 표시하는 데 사용됩니다.

모델은 실제로 데이터입니다

컨트롤러는 HTML5가 대중화되기 몇 년 전, MVC는 웹 애플리케이션의 모범 사례로 괜찮았습니다. 이는 웹 애플리케이션의 뷰 계층이 상대적으로 단순하고 데이터가 충분하기 때문입니다. 프런트엔드에서 필요한 것은 기본적으로 백엔드에서 처리할 수 있지만, 뷰 레이어는 주로 디스플레이용입니다. 당시 컨트롤러는 복잡한 비즈니스 로직을 처리하기 위해 옹호되었기 때문에 소위 뷰 레이어는 상대적으로 가볍습니다. 씬 클라이언트 아이디어.

2010년부터 2011년까지 HTML5 개념이 과장되고 인기를 얻었습니다. 2012년 W3C는 HTML5 사양이 공식적으로 확정되었다고 공식 발표했습니다. 2013년 처음 입사하면서 HTML5 프레임워크인 Sench touch를 접하게 되었는데, Sench touch는 프론트엔드와 백엔드를 완전히 분리하는 MVC 아키텍처를 사용하는 HTML5 프레임워크입니다. 독립적인 프로젝트로 사용됩니다.

프런트엔드를 엔지니어링하고 MVC를 사용해야 하는 이유는 무엇인가요?

HTML4와 비교할 때 HTML5의 가장 큰 장점은 모바일 장치에 매우 유용한 기능을 제공하여 HTML5로 앱을 개발할 수 있다는 것입니다. HTML5로 앱을 개발할 때의 가장 큰 장점은 크로스 플랫폼, 빠른 반복 및 인건비와 제출 효율성을 절약하기 위해 많은 회사가 기존 앱을 변환하기 시작했으며 점차적으로 2015년까지 시장에 나와 있는 많은 앱에 H5 페이지가 포함되었습니다.

H5는 앱을 구축하는 데 사용되므로 View 레이어는 단순한 데이터 표시가 아니라 데이터를 관리하고 다양한 사용자 작업 상태를 관리하며 다양한 사용자 작업 동작도 처리해야 합니다. 등. 따라서 프런트 엔드에도 이러한 복잡한 로직을 관리하고 개발을 보다 효율적으로 수행하려면 MVC와 유사한 프레임워크가 필요합니다. 하지만 이때 MVC는 약간 변경되었습니다.

UI 레이아웃 보기, 데이터 표시

모델이 데이터를 관리

컨트롤러가 사용자 작업에 응답하고 모델을 뷰로 업데이트합니다

이 MVC 아키텍처 패턴은 기본 애플리케이션에 적합한 것으로 보이며 소프트웨어 아키텍처의 계층적 아이디어와도 일치합니다. 그러나 실제로 H5의 지속적인 개발로 인해 사람들은 H5를 사용하여 개발된 애플리케이션이 네이티브와 비슷하거나 네이티브 앱 경험에 가깝기를 바랍니다. 따라서 프런트엔드 애플리케이션의 복잡성은 더 이상 예전과 같지 않습니다. 이때 프론트엔드에는 세 가지 중요한 문제점이 노출되었습니다.

1. 개발자가 코드에서 동일한 DOM API를 대량 호출하여 처리가 번거롭고 작업이 중복되어 코드가 어려워집니다. 유지하기 위해.

2. DOM 작업이 많으면 페이지 렌더링 성능이 저하되고 로딩 속도가 느려져 사용자 경험에 영향을 줍니다.

3. Model이 자주 변경되면 개발자는 View를 적극적으로 업데이트해야 하며, 사용자 작업으로 인해 Model이 변경되면 개발자도 변경된 데이터를 Model에 동기화해야 합니다.

이런 종류의 작업입니다. 번거로울 뿐만 아니라, 복잡하고 변화하는 데이터 상태를 유지하는 것도 어렵습니다.

사실 jquery의 초기 등장은 프론트엔드가 DOM을 보다 간결하게 운영하기 위한 것이었지만 첫 번째 문제만 해결했을 뿐이고 다음 두 가지 문제는 항상 프론트엔드에 존재했습니다.

MVVM의 등장으로 위의 세 가지 문제가 완벽하게 해결되었습니다.

MVVM은 Model, View, ViewModel의 세 부분으로 구성됩니다. Model 레이어는 데이터 모델을 나타내며, 데이터 수정 및 작업을 위한 비즈니스 로직도 Model에서 정의할 수 있습니다. 데이터 모델을 UI로 변환하는 역할을 담당합니다. 그림과 같이 ViewModel은 View와 Model을 동기화하는 객체입니다.

MVVM 아키텍처에서는 View와 Model이 직접 연결되지 않습니다. 대신 ViewModel을 통해 상호 작용하므로 View 데이터의 변경 사항이 Model에 동기화됩니다. . , 모델 데이터의 변경 사항은 즉시 뷰에 반영됩니다.

ViewModel은 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결하며, View와 Model 간의 동기화는 사람의 개입 없이 완전히 자동으로 이루어지므로 개발자는 비즈니스 로직에만 집중하면 되며 DOM이 수행하는 수동 작업은 필요하지 않습니다. 데이터 상태 동기화에 주의할 필요가 없습니다. 복잡한 데이터 상태 유지 관리는 MVVM에서 완벽하게 관리됩니다.

Vue.js의 세부 사항

Vue.js는 MVVM 아키텍처의 모범 사례라고 할 수 있습니다. 이는 MVVM의 ViewModel에 중점을 두고 양방향 데이터 바인딩을 구현합니다. 경량 JS 라이브러리를 비교해 보겠습니다. API는 간단하고 사용하기 쉽습니다. Vue의 기본 지식에 대한 기성 튜토리얼이 있으므로 여기서는 자세히 설명하지 않겠습니다. Vue.js의 양방향 바인딩 구현 세부 사항을 간략하게 살펴보겠습니다.

Vue. Node.js는 데이터 바인딩을 구현하기 위해 관찰자 패턴과 결합된 Object.defineProperty setter의 getter 및 getter를 사용합니다. 일반 Javascript 객체를 데이터 옵션으로 Vue 인스턴스에 전달하면 Vue는 해당 속성을 반복하고 Object.defineProperty를 사용하여 해당 속성을 getter/setter로 변환합니다. getter/setter는 사용자에게 표시되지 않지만 내부적으로 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다.

데이터 객체의 모든 속성을 모니터링할 수 있는 Observer 데이터 리스너는 최신 값을 가져와 구독자에게 알릴 수 있습니다.

컴파일 명령 구문 분석기를 구현하기 위한 Object.defineProperty 및 setter의 기능은 각 요소 노드의 명령을 스캔 및 구문 분석하고 명령 템플릿에 따라 데이터를 교체하며 해당 업데이트 함수를 바인딩하는 것입니다. 🎜>

Watcher Subscriber는 Observer와 Compile을 연결하는 브릿지로서 각 속성 변경에 대한 알림을 구독하고 받을 수 있으며, 배열을 유지하는

Dep message subscriber 명령에 바인딩된 해당 콜백 함수를 실행할 수 있습니다. 내부적으로 Collect subscriber(Watcher)의 경우 데이터 변경이 알림 기능을 트리거한 다음 구독자의 업데이트 메서드를 호출합니다

new Vue()가 실행되면 Vue는 초기화 단계에 들어갑니다. 데이터 옵션을 탐색하고 Object.defineProperty를 사용하여 이를 getter/setter로 변환하여 데이터 변경 모니터링 기능을 구현합니다. 반면 Vue의 명령어 컴파일러 Compile은 요소 노드의 명령어를 검색 및 구문 분석하고 뷰를 초기화합니다. Watcher를 구독하여 뷰를 업데이트합니다. 이때 Wather는 메시지 구독자(dep)에 자신을 추가하고 초기화가 완료됩니다.

데이터가 변경되면 Observer의 setter 메서드가 트리거됩니다. Dep는 즉시 Dep.notify()를 호출하기 시작하고 구독자의 업데이트 메서드를 호출합니다. 알림을 받으면 그에 따라 뷰가 업데이트되고 데이터 바인딩이 완료됩니다.