Vue 양 방향 데이터 바 인 딩(MVVM)의 원리

MVVM
MVVM 은 Model-View-ViewModel 의 줄 임 말로 전단 개발 을 바탕 으로 하 는 구조 모델 로 그 핵심 은 View 와 ViewModel 에 대한 양 방향 데이터 바 인 딩 을 제공 하 는 것 이다.이 로 인해 ViewModel 의 상태 변 화 는 View,즉 데이터 양 방향 바 인 딩 에 자동 으로 전 달 될 수 있다.

Vue.js 는 MVVM 스타일 의 양 방향 데이터 바 인 딩 을 제공 하 는 자바 script 라 이브 러 리 로 View 층 에 집중 합 니 다.그것 의 핵심 은 MVVM 중의 VM,즉 ViewModel 이다.ViewModel 은 View 와 Model 을 연결 하여 보기 와 데이터 의 일치 성 을 확보 하 는데 이런 경량급 구 조 는 전단 개발 을 더욱 효율 적 이 고 편리 하 게 한다.
데이터 납치
vue.js 는 데이터 납치 와 게시 자-구독 자 모드 를 결합 하 는 방식 으로 Object.defineProperty()를 통 해 각 속성의 setter,getter 를 납치 하여 데이터 가 변동 할 때 구독 자 에 게 메 시 지 를 발표 하고 해당 하 는 감청 리 셋 을 촉발 합 니 다.
Object.defineProperty()
Object.defineProperty()방법 은 대상 에 새로운 속성 을 직접 정의 하거나 대상 의 기 존 속성 을 수정 하여 이 대상 을 되 돌려 줍 니 다.
　　Object.defineProperty(obj, prop, descriptor)
인자:

obj-그 위 에 속성 을 정의 하 는 대상.

prop-정의 하거나 수정 할 속성의 이름

descriptor--정의 되 거나 수 정 될 속성 설명자

반환 값:함수 에 전 달 된 대상.
MVVM 데이터 양 방향 연결 절차
1.데이터 감청 기 Observer 를 실현 하여 데이터 대상 의 모든 속성 을 감청 할 수 있 습 니 다.변동 이 있 으 면 최신 값 을 받 고 구독 자 에 게 알 릴 수 있 습 니 다.
2.하나의 명령 해석 기 Compile 을 실현 하고 모든 요소 노드 의 명령 을 스 캔 하고 해석 하 며 명령 템 플 릿 에 따라 데 이 터 를 교체 하고 해당 하 는 업데이트 함 수 를 연결 합 니 다.
3.하나의 Watcher 를 실현 하고 Observer 와 Compile 을 연결 하 는 다리 로 서 각 속성 변동 에 대한 통 지 를 구독 하고 받 을 수 있 으 며 명령 에 따라 연 결 된 해당 반전 함 수 를 실행 하여 보 기 를 업데이트 할 수 있 습 니 다.
4.MVVM 입구 함수,상기 세 가 지 를 통합 합 니 다.
절 차 는 다음 과 같다.

Observer 구현
Obeject.defineProperty()를 이용 하여 속성 변동 을 감청 할 수 있다 는 것 을 알 고 있 습 니 다.observe 가 필요 한 데이터 대상 을 재 귀적 으로 옮 겨 다 니 며 하위 속성 대상 의 속성 을 포함 하여 setter 와 getter 를 추가 합 니 다.
이렇게 되면 이 대상 의 어떤 값 에 값 을 부여 하면 setter 를 촉발 하여 데이터 변 화 를 감청 할 수 있 습 니 다.
Compile 구현
copile 에서 주로 하 는 일 은 템 플 릿 명령 을 분석 하고 템 플 릿 의 변 수 를 데이터 로 바 꾼 다음 에 렌 더 링 페이지 보 기 를 초기 화하 고 각 명령 에 대응 하 는 노드 를 업데이트 함수 에 연결 하여 감청 데 이 터 를 추가 하 는 구독 자 입 니 다.데이터 가 변동 되면 알림 을 받 고 새로운 보 기 를 보 여 줍 니 다.그림 과 같 습 니 다.

Watcher 구현
Watcher 구독 자 는 Observer 와 Compile 간 통신 의 다리 로 서 주로 하 는 일 은:
1.자신의 예화 시 속성 구독 기(dep)에 자신 추가
2、자신 에 게 update()방법 이 있어 야 합 니 다
3.속성 변동 dep.notice()알림 이 있 을 때 자신의 update()방법 을 호출 하고 Compile 에 연 결 된 반전 을 촉발 하면 공 을 세 워 후퇴 합 니 다.
MVVM 구현
MVVM 은 데이터 바 인 딩 의 입구 로 서 Observer,Compile,Watcher 세 가 지 를 통합 하고 Observer 를 통 해 자신의 model 데이터 변 화 를 감청 하 며 Compile 을 통 해 컴 파일 템 플 릿 명령 을 해석 하고 최종 적 으로 Watcher 를 이용 하여 Observer 와 Compile 간 의 통신 다 리 를 구축한다.
데이터 변화 달성->보기 업데이트;보기 인 터 랙 션 변화(input)->데이터 model 이 변경 한 양 방향 바 인 딩 효과.
이상 은 Vue 양 방향 데이터 바 인 딩(MVVM)의 원리 에 대한 상세 한 내용 입 니 다.Vue 양 방향 데이터 바 인 딩(MVVM)에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!