vue.js의 두 가지 코어는 무엇입니까?

Vue.js는 MVVM 데이터의 양방향 바인딩을 제공하는 라이브러리입니다. 핵심 아이디어는 데이터 기반 구성 요소 시스템입니다.

데이터 기반:

Vue.js 데이터 관찰 원리는 ES5Object.defineProperty 및 메모리 속성: getter 및 setter(따라서 IE9 이상에서만 호환 가능)를 사용하여 기술적으로 구현됩니다. 수집에 의존하는 관찰 메커니즘. 핵심은 데이터와 뷰의 일관성을 보장하는 VM, 즉 ViewModel입니다.

watcher: 각 명령에는 v-text="msg", {{ msg }}와 같은 watcher라는 데이터를 관찰하는 데 사용되는 해당 객체가 있습니다. watcher 객체에는 렌더링할 정보가 포함되어 있습니다. 연관된 DOM 요소입니다.

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

종속성 수집을 기반으로 하는 관찰 메커니즘의 원리:

1 일반적으로 데이터 개체의 데이터를 메모리 속성으로 변경하기 위해 정의를 호출하여 기본 데이터를 "관찰 가능한 개체"로 변환합니다. 관찰 가능한 객체에는 값 getter 또는 값 setter가 있을 수 있습니다.

2 템플릿을 구문 분석할 때, 즉 감시자의 평가 프로세스 중에 평가되는 각 관찰 가능 객체는 현재 감시자를 자체 구독자로 등록하고 현재 감시자의 종속성이 됩니다.

3 종속 관찰 가능 개체에 값이 할당되면 해당 개체를 구독하는 모든 감시자에게 재평가를 알리고 해당 업데이트, 즉 감시자 개체의 관련 DOM 변경 렌더링을 트리거합니다.

종속성 수집의 장점은 범위 내의 모든 감시자를 수동으로 트리거하거나 평가할 필요 없이 정확하고 사전에 데이터 변경 사항을 추적할 수 있다는 것입니다(Angular의 더티 검사 구현의 단점). 특히 배열의 경우 배열의 변경 사항을 모니터링하기 위해 배열을 래핑하는 가변 메서드(예: 푸시)를 사용해야 합니다. 속성을 추가/삭제하거나 배열의 특정 위치에 있는 요소를 수정할 때 obj.$add(key, value)와 같은 특정 함수를 호출하여 업데이트를 트리거해야 합니다. 이는 ES5의 언어 기능으로 인해 제한됩니다.

컴포넌트 시스템:

애플리케이션 UI는 전체적으로 컴포넌트 트리로 구성되어 있다고 볼 수 있습니다.

컴포넌트 등록:

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

컴포넌트의 핵심 옵션

1 템플릿: 템플릿은 최종적으로 사용자에게 표시되는 데이터와 DOM 간의 매핑 관계를 선언합니다.

2 초기 데이터(data): 컴포넌트의 초기 데이터 상태입니다. 재사용 가능한 구성 요소의 경우 일반적으로 비공개 상태입니다.

3 허용되는 외부 매개변수(props): 매개변수를 통해 구성요소 간에 데이터가 전송되고 공유됩니다.

4 메서드: 데이터 수정은 일반적으로 구성 요소의 메서드 내에서 수행됩니다.

5 수명 주기 후크: 구성 요소는 여러 수명 주기 후크 기능을 트리거합니다. 최신 버전 2.0에서는 수명 주기 기능의 이름이 크게 변경되었습니다.

6 프라이빗 리소스(자산): Vue.js에서는 사용자가 정의한 명령어, 필터, 구성 요소 등을 총칭하여 리소스라고 합니다. 구성 요소는 자체 비공개 리소스를 선언할 수 있습니다. 개인 리소스는 구성 요소와 해당 하위 구성 요소에 의해서만 호출될 수 있습니다.

Webpack은 다양한 파일 형식에 대한 전처리 논리를 정의하는 강력한 로더 API를 제공하는 오픈 소스 프런트 엔드 모듈 구축 도구입니다. 이는 .vue 접미사 단일 파일 구성 요소 형식의 기초입니다. 따라서 이를 기반으로 Youda가 개발한 vue-loader는 템플릿, 스타일 및 로직의 세 가지 요소를 동일한 파일에 통합하여 .vue 파일 접미사가 있는 단일 파일 구성 요소 형식을 형성하여 프로젝트 아키텍처를 용이하게 합니다. 및 개발 참조.

기타 기능:

1 비동기 일괄 DOM 업데이트: 대량의 데이터가 변경되면 영향을 받는 모든 감시자는 대기열로 푸시되고 각 감시자는 대기열을 한 번만 푸시합니다. 이 큐는 프로세스의 다음 틱에서 비동기적으로 실행됩니다. 이 메커니즘은 동일한 데이터에 대한 여러 변경으로 인해 발생하는 중복 DOM 작업을 방지할 수 있으며, DOM 읽기 및 쓰기 전환으로 인해 발생할 수 있는 레이아웃을 방지하기 위해 모든 DOM 쓰기 작업이 함께 실행되도록 할 수도 있습니다.

2 애니메이션 시스템: Vue.js는 요소의 가시성이 변경되면 사용자가 해당 CSS 전환 또는 애니메이션 효과를 쉽게 정의할 수 있을 뿐만 아니라 풍부한 JavaScript 후크 기능을 사용할 수도 있습니다. 레벨 애니메이션 처리. 3 확장성: 사용자 정의 지침, 필터 및 구성 요소 외에도 Vue.js는 사용자가 여러 구성 요소에서 공통 기능을 재사용할 수 있는 유연한 믹스인 메커니즘을 제공합니다.

위 내용은 vue.js의 두 가지 코어는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!