집 >웹 프론트엔드 >JS 튜토리얼 >Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)

Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)

亚连원래의: 2018-06-05 17:22:272264검색

Vue의 기본 구현 원리에 대한 지식 포인트를 요약해 드리겠습니다. 이것이 필요하신 경우, 저희가 정리한 내용이 도움이 되기를 바랍니다.

서문

최근 Vue 원리 분석 및 양방향 바인딩 MVVM 구현에 대한 이 기사를 공부하고 있습니다. 공부하면서 내 생각을 요약하겠습니다.

Vue는 일반적인 MVVM 프레임워크입니다. Model은 단지 일반적인 JavaScript 객체일 뿐이며, View를 수정하면 자동으로 업데이트됩니다. 이 디자인은 상태 관리를 매우 간단하고 직관적으로 만듭니다. 그렇다면 Vue는 모델과 뷰를 어떻게 연결합니까?

구현 원리 개요

이것은 서문에 언급된 기사의 코드로, Vue의 특성을 구현한 전형적인 코드입니다:

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
  var vm = new MVVM({
    el: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue 이러한 양방향 데이터 바인딩 효과를 달성하려면 세 가지 주요 모듈이 필요합니다:

Observer: 데이터 객체의 모든 속성을 모니터링할 수 있습니다. 변경 사항이 있는 경우 최신 값을 가져와 구독자에게 알릴 수 있습니다.

컴파일: 각 요소 노드의 지침을 스캔하고 구문 분석하고

Watcher: Observer와 Compile을 연결하는 브릿지로서 각 속성 변경을 구독하고 알림을 받을 수 있으며, 명령어에 바인딩된 해당 콜백 함수를 실행하여 업데이트할 수 있습니다.

Observer

Observer의 핵심은 데이터 변경을 모니터링하는 Object.defineProperty()입니다. 이 함수 내에서 Setter와 Getter를 정의할 수 있습니다. 이때 Observer는 구독자에게 이를 알리게 되며, 구독자는 Watcher가 됩니다.

Watcher

Watcher 구독자는 Observer와 Compile 간의 통신 브리지 역할을 합니다.

스스로 인스턴스화할 때 속성 구독자(dep)에 자신을 추가합니다.
업데이트가 있어야 합니다. () 메소드
는 dep.notice()에서 속성 변경 알림을 받을 때 자체 update() 메소드를 호출할 수 있으며 Compile

Compile

에 바인딩된 콜백을 트리거할 수 있습니다. Compile이 수행하는 주요 작업은 다음과 같습니다. 템플릿 지침을 구문 분석하고 템플릿의 변수를 데이터로 바꾼 다음 렌더링 페이지 보기를 초기화하고 각 지침에 해당하는 노드에 업데이트 함수를 바인딩하고 구독자를 추가하여 데이터가 변경되면 알림을 받고, 뷰를 업데이트하세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)

서문

구현 원리 개요

Observer

Watcher

Compile

관련 기사