vue의 핵심은 무엇인가

vue에는 두 가지 코어가 있습니다. 1. 데이터 기반, 즉 데이터의 양방향 바인딩으로 데이터 변경에 따라 뷰(DOM)의 콘텐츠도 변경 가능 2. HTML을 확장할 수 있는 구성 요소 기반 시스템 요소를 만들고 코드를 캡슐화합니다.

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

vue.js의 두 코어

• Data-driven

• Componentized system

1. 데이터 중심, 즉 양방향 데이터 바인딩

• 반응형 코어 Vue의 경우 종속성은 getter 중에 수집되고 종속성 업데이트는 setter 중에 트리거됩니다.

• vue는 데이터에 있는 개체의 모든 속성을 순회하고 Object.defineProperty를 사용하여 이러한 모든 속성을
  getter로 변환합니다. /세터.

• 이러한 getter/setter는 사용자에게 보이지 않지만 내부적으로는 Vue가 종속성을 추적하고 속성
  에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다.

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

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

• setter가 설정되면 종속성 업데이트가 트리거되고 나중에 종속성 setter가 트리거되면 감시자에게 알림이 전달되어 관련 구성 요소가 다시 렌더링됩니다.

2. 구성 요소 기반 시스템

구성 요소 기반

은 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화합니다. 각 구성 요소는 ViewModel에 해당합니다. 페이지의 각 독립적인 시각적/대화형 영역은 구성 요소로 간주될 수 있습니다. 각 구성 요소는 프로젝트 디렉터리에 해당하며 구성 요소에 필요한 다양한 리소스가 이 디렉터리에 유지됩니다. 페이지는 구성 요소의 컨테이너이며 구성 요소를 자유롭게 중첩하고 결합하여 완전한 페이지를 구성할 수 있습니다.

컴포넌트의 핵심 옵션:

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

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

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

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

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

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

【관련 추천: vue.js tutorial】

위 내용은 vue의 핵심은 무엇인가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!