vuejs 데이터 구동 보기 원리 실현

데이터 구동 이란 무엇 입 니까?
데이터 구동 은 vuejs 의 가장 큰 특징 이다.vuejs 에서 이른바 데이터 구동 이란 데이터 가 변화 할 때 사용자 인터페이스 에 상응하는 변화 가 발생 하기 때문에 개발 자 는 수 동 으로 dom 를 수정 할 필요 가 없다.
예 를 들 어 우 리 는 button 을 누 르 면 요소 의 텍스트 가 옳 고 그 름 의 전환 이 필요 합 니 다.jquery 칼 로 불 씨 를 경작 하 는 시대 에 페이지 의 수정 에 대해 우 리 는 보통 이러한 절차 입 니 다.우 리 는 button 바 인 딩 사건 에 대해 문안 에 대응 하 는 요소 dom 대상 을 얻 은 다음 에 전환 에 따라 이 dom 대상 의 문안 값 을 수정 합 니 다.
한편,vuejs 가 이 기능 을 실현 하 는 절차 에 대해 button 요소 에 사건 을 가리 키 는 동시에 대응 하 는 문안 의 속성 을 밝 히 고 사건 을 클릭 할 때 속성의 값 을 바 꾸 면 해당 요소 의 텍스트 는 자동 으로 전환 할 수 있 습 니 다.우 리 는 예전 처럼 수 동 으로 dom 을 조작 할 필요 가 없습니다.
한 마디 로 하면 vuejs 는 데이터 와 dom 대상 이 조작 하 는 맵 을 봉인 해 주 었 습 니 다.우 리 는 데이터 의 논리 적 처리 에 만 관심 을 가 져 야 합 니 다.데이터 의 변 화 는 자 연 스 럽 게 페이지 에 페이지 를 다시 렌 더 링 할 수 있 습 니 다.
이렇게 하 는 것 은 확실히 우리 에 게 좋 은 점 을 가 져 다 주 었 다.우 리 는 코드 에서 dom 을 자주 조작 할 필요 가 없다.실제 프로젝트 에서 우 리 는 많은 코드 가 데이터 수정 후에 수 동 으로 페이지 요 소 를 다시 렌 더 링 하고 페이지 가 점점 복잡 해 질 때 페이지 코드 조직 은 유지 하기 어렵다.이 동시에 js 가 dom 에 대한 빈번 한 조작 은 페이지 코드 의 오류 확률 이 높 고 페이지 의 보기 전시 회 는 js 코드 에 융합 되 며 페이지 보기 디 스 플레이 의 업그레이드 에 도 우호 적 이지 않다.
그렇다면 vuejs 는 어떻게 이런 데이터 구동 을 실현 합 니까?
MVVM 프레임 워 크
Vuejs 의 데이터 구동 은 MVVM 이라는 프레임 워 크 를 통 해 이 루어 진다.MVVM 프레임 워 크 는 주로 model,view,view model 세 부분 을 포함한다.
Model:데이터 부분 을 말 하 며 전단 에 대응 하 는 것 이 자바 script 대상 입 니 다.
View:보기 부분 을 말 하 는데 대응 하 는 전단 이 dom 입 니 다.
Viewmodel:보기 와 데 이 터 를 연결 하 는 미들웨어 입 니 다.

데이터(Model)와 보기(View)는 직접 통신 할 수 없고 ViewModel 을 통 해 쌍방의 통신 을 실현 해 야 한다.데이터 가 변 할 때 view Model 은 이러한 변 화 를 감청 하고 view 에 수정 을 알 릴 수 있 습 니 다.마찬가지 로 페이지 에 이벤트 가 실 행 될 때 viewmodel 도 이 벤트 를 감청 하고 model 에 응답 하 라 고 알 릴 수 있 습 니 다.Viewmodel 은 한 관찰자 에 해당 하 며 쌍방의 동작 을 감시 하고 상대방 에 게 해당 하 는 조작 을 하도록 신속하게 알려 준다.
Vuejs 데이터 구동 실현
데이터 구동 의 실현 에 대해 우 리 는 간단하게 타 이 머 를 통 해 이 기능 을 실현 할 수 있다.타 이 머 는 정시 에 대상 데 이 터 를 감시 하고 타 이 머 는 데이터 변 화 를 감시 하 며 인터페이스 업데이트 여 부 를 확인 할 수 있다.

a = 1;
  function renderDom(){
    document.getElementById('app').innerHTML = '   ' + a;
  }
  
  function watcher(method){
    var b = a;
    method.apply();
     return setInterval(function(){
      if(b != a){
        method.apply();
        b = a;
      }
    }, 1000)
  }
  watcher(renderDom);

물론 vuess 는 이렇게 간단 하고 폭력 적 인 실현 방식 일 수 없다.vuess 는 관찰 자 를 실현 함으로써 이 루어 진 데이터 구동 이다.

우선,vuejs 는 실례 화 과정 에서 실례 화 대상 옵션 에 전 달 된 data 옵션 을 모든 속성 을 옮 겨 다 니 며 Object.defineProperty 를 사용 하여 이 속성 을 모두 getter/setter 로 변환 합 니 다.
또한 모든 인 스 턴 스 대상 은 하나의 watcher 인 스 턴 스 대상 이 있 습 니 다.그 는 템 플 릿 을 컴 파일 하 는 과정 에서 getter 로 data 의 속성 을 방문 합 니 다.watcher 는 이때 사용 하 는 data 속성 을 의존 으로 기록 하여 보기 와 데이터 간 의 관 계 를 만 듭 니 다.이후 에 우리 가 보 기 를 렌 더 링 하 는 데이터 의존 이 바 뀌 었 을 때(즉,데이터 의 setter 가 호출 되 었 을 때)watcher 는 앞 뒤 두 개의 수치 가 바 뀌 었 는 지 비교 한 다음 에 보 기 를 통 해 다시 렌 더 링 할 지 여 부 를 확인 합 니 다.
이렇게 해서 이른바 데이터 가 보기 에 대한 구동 을 실현 했다.
코드 의 실현 에 대하 여 이 글 을 참고 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.