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: '#mvvm-app', data: { word: 'Hello World!' }, methods: { sayHi: function() { this.word = 'Hi, everybody!'; } } }); </script>
ue 이러한 양방향 데이터 바인딩 효과를 달성하려면 세 가지 주요 모듈이 필요합니다:
Observer: 데이터 객체의 모든 속성을 모니터링할 수 있습니다. 변경 사항이 있는 경우 최신 값을 가져와 구독자에게 알릴 수 있습니다.
컴파일: 각 요소 노드의 지침을 스캔하고 구문 분석하고
Watcher: Observer와 Compile을 연결하는 브릿지로서 각 속성 변경을 구독하고 알림을 받을 수 있으며, 명령어에 바인딩된 해당 콜백 함수를 실행하여 업데이트할 수 있습니다.
Observer의 핵심은 데이터 변경을 모니터링하는 Object.defineProperty()입니다. 이 함수 내에서 Setter와 Getter를 정의할 수 있습니다. 이때 Observer는 구독자에게 이를 알리게 되며, 구독자는 Watcher가 됩니다.
Watcher 구독자는 Observer와 Compile 간의 통신 브리지 역할을 합니다.
스스로 인스턴스화할 때 속성 구독자(dep)에 자신을 추가합니다.
업데이트가 있어야 합니다. () 메소드
는 dep.notice()에서 속성 변경 알림을 받을 때 자체 update() 메소드를 호출할 수 있으며 Compile
에 바인딩된 콜백을 트리거할 수 있습니다. Compile이 수행하는 주요 작업은 다음과 같습니다. 템플릿 지침을 구문 분석하고 템플릿의 변수를 데이터로 바꾼 다음 렌더링 페이지 보기를 초기화하고 각 지침에 해당하는 노드에 업데이트 함수를 바인딩하고 구독자를 추가하여 데이터가 변경되면 알림을 받고, 뷰를 업데이트하세요.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Bootstrap은 접을 수 있는 그룹화 측면 탐색 메뉴를 구현합니다
layui 테이블 체크박스 선택 예 모든 스타일 및 기능 선택
위 내용은 Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!