vuejs의 두 코어는 무엇입니까

vuejs의 두 가지 핵심은 데이터 기반 시스템과 구성 요소 시스템입니다. 데이터 기반은 데이터와 보기의 일관성을 보장하는 데 사용되는 양방향 데이터 바인딩입니다. 구성 요소 시스템은 페이지를 상대적으로 독립적인 여러 모듈로 추상화할 수 있으며 코드 재사용을 실현하고 개발 효율성과 코드 품질을 향상하며 코드 유지 관리를 용이하게 할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue.js의 두 가지 핵심: 1. 데이터 기반 ------------- 2. 구성 요소 시스템

1. 데이터 기반, 즉 양방향 바인딩 data

data 변경이 발생한 후 페이지가 다시 렌더링됩니다. 이것이 Vue 응답성입니다.

이 프로세스를 완료하려면 다음을 수행해야 합니다.

• 데이터 변경 감지
• 뷰가 의존하는 데이터 수집
• 데이터가 변경되면 업데이트해야 하는 뷰 부분에 자동으로 "알림" 업데이트하세요

전문가에 해당합니다. 일반적인 속담은 다음과 같습니다:

• 데이터 하이재킹/데이터 프록시
• 종속성 수집
• 모델 게시 및 구독

즉, Vue 응답성의 핵심은 종속성이 수집된다는 것입니다. getter 중에 종속성 업데이트는 setter 중에 트리거됩니다.

Vue는 데이터에 있는 개체의 모든 속성을 탐색하고 Object.defineProperty을 사용하여 이러한 모든 속성을 getter/setter로 변환합니다.

이러한 getter/setter는 사용자에게 표시되지 않지만 내부적으로는 Vue를 사용하여 종속성을 추적하고 변경 사항을 알리고 속성이 액세스되고 수정될 때 변경 사항을 알립니다.

각 구성 요소 인스턴스는 구성 요소 렌더링 프로세스 중에 "접촉된" 데이터 속성을 종속성으로 기록하는 감시자 인스턴스에 해당합니다.

getter 중에 종속성을 수집합니다. 종속성 수집은 구독 데이터 변경 감시자의 수집입니다. 종속성 수집의 목적은 응답 데이터가 변경될 때 해당 구독자에게 관련 로직을 처리하도록 알리는 것입니다. setter가 트리거될 때 종속성 업데이트가 트리거됩니다. 나중에 종속성의

setter가 트리거

되면 가 감시자에 알리고 그에 따라 관련 구성 요소가 다시 렌더링됩니다.

요약:

1) 원칙:

Vue 인스턴스를 생성할 때 vue는 데이터 옵션의 속성을 순회하고 Object.defineProperty를 사용하여 속성에 getter 및 setter를 추가하여 데이터 읽기를 하이재킹합니다( getter는 Collection에 의존하는 데 사용되고, setter는 업데이트를 전달하는 데 사용되며, 내부적으로 종속성을 추적하여 속성에 액세스하고 수정될 때 변경 사항을 알립니다.

각 구성 요소 인스턴스에는 구성 요소 렌더링 프로세스 중 종속성의 모든 데이터 속성(종속성 수집, 계산된 감시자 및 사용자 감시자 인스턴스)을 기록하는 해당 감시자 인스턴스가 있습니다. setter 메소드 이 데이터에 의존하는 감시자 인스턴스는 다시 계산(업데이트 배포)

하여 관련 구성 요소를 다시 렌더링하라는 알림을 받습니다.

2) 구현 프로세스:

우리는 데이터의 양방향 바인딩을 구현하려면 먼저 데이터를 하이재킹하고 모니터링해야 한다는 것을 이미 알고 있으므로 모든 속성을 모니터링하려면 관찰자를 설정해야 합니다. 속성이 변경되면 구독자 Watcher에게 업데이트가 필요한지 확인하도록 알려야 합니다.

구독자가 많기 때문에 이러한 구독자를 구체적으로 수집하고 Observer와 Watcher 간에 균일하게 관리하려면 메시지 구독자 Dep이 필요합니다. 다음으로, 각 노드 요소를 스캔하고 구문 분석하고 관련 명령어를 구독자 Watcher로 초기화하고 템플릿 데이터를 바꾸거나 해당 함수를 바인딩하는 명령어 파서 컴파일도 필요합니다. 이때 구독 시 Watcher가 변경 사항을 수신합니다. 해당 속성을 사용하면 해당 업데이트 기능을 실행하여 뷰를 업데이트합니다. 따라서 다음으로 데이터의 양방향 바인딩을 달성하기 위해 다음 3단계를 수행합니다.

1. 모든 속성을 하이재킹 및 모니터링하고 변경 사항이 있으면 구독자에게 알리는 리스너 관찰자를 구현합니다.

2. 속성 변경 알림을 수신하고 해당 기능을 실행하여 뷰를 업데이트할 수 있는 구독자 Watcher를 구현합니다.

3. 각 노드의 관련 명령어를 스캔 및 구문 분석하고 초기화된 템플릿 데이터에 따라 해당 구독자를 초기화할 수 있는 파서 컴파일을 구현합니다

참고: Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外Proxy支持代理数组的变化。Proxy 는 vue3.0

2. 구성 요소 시스템

이해:

1) 페이지를 상대적으로 독립적인 여러 모듈로 추상화할 수 있습니다.

2) 코드 재사용을 구현하고 개선합니다. 개발 효율성 및 코드 품질, 쉬운 코드 유지 관리

컴포넌트의 핵심 옵션

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

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

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

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

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

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

관련 추천: "vue.js Tutorial"

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