vuejs 데이터 드라이버를 이해하는 방법

vuejs에서 데이터 기반이란 데이터가 변경되면 그에 따라 사용자 인터페이스가 변경되고 개발자가 DOM을 수동으로 수정할 필요가 없다는 것을 의미합니다. 즉, 데이터의 변경 사항을 제어하여 DOM을 변경합니다. ( 데이터가 변경되면 DOM의 내용도 변경됩니다.

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

One: Vue란 무엇이며 Vue를 이해하는 방법

Vue는 데이터를 뷰에 바인딩하는 MVVM 모드 데이터 기반 페이지를 기반으로 하는 프레임워크입니다. 단일 페이지 애플리케이션을 구현하기 위한 기술입니다.

몇 가지 주요 기능 요약:

• 간단함

• 경량

• 빠름

• 데이터 기반

• 모듈 친화적

• 구성 요소화

vue는 데이터 드라이버 2에 의존합니다. 웨이 바인딩을 사용하면 페이지 개발이 더 쉬워지고 개발자는 DOM을 수동으로 수정할 필요가 없습니다. Vue는 양방향 데이터 바인딩으로 모든 것을 더 쉽게 만듭니다. 데이터 기반 양방향 바인딩은 데이터 세트를 통해 구현되며 Object.defineProperty()에 의해 정의된 함수 원칙을 가져옵니다.

2. 컴포넌트 기반 개발은 프로젝트의 확장성과 이식성을 높이고 코드 재사용성을 높여줍니다.

3. 단일 페이지 애플리케이션 경험, 로컬 구성 요소는 인터페이스를 업데이트하여 사용자 경험을 더 빠르게 만들고 시간을 절약합니다.

SPA라고도 하는 단일 페이지 애플리케이션은 모든 활동을 하나의 웹 페이지로 제한하고 웹 페이지가 초기화될 때 해당 HTML, JavaScript 및 CSS만 로드합니다. 로딩이 완료된 후에는 페이지가 더 이상 다시 로드되거나 점프하지 않습니다. 내부 구성 요소나 모듈만 상호 작용하고 해시 또는 히스토리 API를 통해 점프하며, 응답 기능을 구현하기 위해 ajax를 통해 데이터를 가져옵니다. 싱글페이지라고 합니다!

4. js 코드에는 눈에 보이지 않는 표준이 있으며, 팀워크를 통해 개발된 코드가 더 읽기 쉽습니다.

2: Vue 데이터 기반(양방향 데이터 바인딩)의 원리는 무엇인가요?

데이터 기반이란 무엇인가요?

데이터 기반은 vue.js의 가장 큰 특징입니다. vue.js에서 소위 데이터 기반이란 데이터가 변경되면 그에 따라 사용자 인터페이스도 변경되므로 개발자가 DOM을 수동으로 수정할 필요가 없음을 의미합니다.

예를 들어 버튼을 클릭하면 요소의 텍스트가 예와 아니요 사이에서 전환되어야 합니다. jquery에서는 페이지를 수정할 때 일반적으로 이 프로세스를 따릅니다. 이벤트를 버튼에 바인딩한 다음 복사본에 해당하는 요소 dom 객체를 얻은 다음 스위치에 따라 dom 객체의 복사 값을 수정합니다.

그럼 vuejs는 어떻게 이 데이터 드라이브를 달성하나요?

Vue는 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용하고, Object.defineProperty()를 통해 각 속성의 setter 및 getter를 하이재킹하고, 데이터가 변경될 때 구독자에게 메시지를 게시하는 방식으로 주로 양방향 데이터 바인딩을 구현합니다. 해당 청취 콜백. 일반 Javascript 객체를 데이터 옵션으로 Vue 인스턴스에 전달하면 Vue는 해당 속성을 반복하고 Object.defineProperty를 사용하여 해당 속성을 getter/setter로 변환합니다. getter/setter는 사용자에게 표시되지 않지만 내부적으로 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다.

Vue의 양방향 데이터 바인딩은 MVVM을 데이터 바인딩의 입구로 사용하여 Observer, Compile 및 Watcher를 통합합니다. Observer를 사용하여 자체 모델의 데이터 변경을 모니터링하고 Compile을 사용하여 템플릿 지침을 구문 분석하고 컴파일합니다. vue Parse {{}}), 마지막으로 watcher를 사용하여 관찰자와 컴파일 간의 통신 브리지를 구축하여 데이터 변경 -> 보기 업데이트 보기 대화형 변경(입력) -> 데이터 모델 변경을 달성합니다. .

getter/setter에 대한 이해가 있으신가요?

Vue 인스턴스 아래 데이터 객체의 속성을 인쇄할 때 각 속성에는 두 개의 상응하는 get 및 set 메소드가 있습니다. 이름에서 알 수 있듯이 get은 값 획득을 위한 것이고 set은 할당을 위한 것입니다. value 및 할당이 obj.prop을 사용하고 있는데 여기에 문제가 있습니다. 객체의 값이 변경되었는지 어떻게 알 수 있나요? 이제 세트가 나타날 차례입니다. get 및 set을 함수로 이해할 수 있습니다. 객체의 속성을 호출할 때 get.property(){...}를 입력하고 먼저 객체에 이 속성이 있는지 여부를 확인한 다음 name 속성을 추가합니다. 이름 속성이 있으면 값을 할당하고, 이름 속성을 반환합니다. get을 값을 취하는 함수로 생각할 수 있으며, 함수의 반환 값은 함수가 얻는 값입니다. 제가 더 중요하게 생각하는 것은 인스턴스에 값을 할당할 때 set name(val){...}을 입력하는 것입니다. 형식 매개변수 val은 name 속성에 할당한 값입니다. . 이 기능에서는 양방향 바인딩 등 많은 기능이 변경되었습니다! 이 값의 모든 변경은 집합을 거쳐야 하기 때문에 다른 방법으로 변경할 수 없으며 이는 범용 수신기와 동일합니다. ES5 객체 프로토타입에는 get 및 set을 객체에 바인딩하는 데 특별히 사용되는 두 가지 새로운 속성 __defineGetter__ 및 __defineSetter__가 있습니다. 프로토타입에 작성되므로 상속 및 재사용이 가능하므로 다음 방법을 사용하는 것이 좋습니다.

3: MVVM 프레임워크

Vue.js의 데이터 드라이버는 MVVM 프레임워크를 통해 구현됩니다. MVVM 프레임워크는 주로 모델, 뷰, 뷰모델의 세 부분으로 구성됩니다.

• Model: 프론트엔드의 javascript 객체에 해당하는 데이터 부분을 의미합니다.

• View: 프론트엔드의 dom에 해당하는 뷰 부분을 의미합니다. Communication

• Data(Model)와 View(View)는 직접 통신할 수 없고, ViewModel을 통해 서로 통신해야 합니다. 데이터가 변경되면 viewModel은 변경 사항을 모니터링하고 적시에 변경하도록 뷰에 알릴 수 있습니다. 마찬가지로 페이지에서 이벤트가 트리거되면 viewMOdel도 이벤트를 수신하고 모델에 응답하도록 알릴 수 있습니다. Viewmodel은 관찰자와 동일하며, 양 당사자의 작업을 모니터링하고 적시에 해당 작업을 수행하도록 상대방에게 알립니다.

관련 추천: "

vue.js Tutorial

"

위 내용은 vuejs 데이터 드라이버를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!