vue.js의 데이터 기반이란 무엇입니까?

vue.js의 데이터 기반은 데이터가 변경되면 그에 따라 사용자 인터페이스가 변경된다는 것입니다. 개발자는 dom을 수동으로 수정할 필요가 없습니다. Vuejs는 데이터 및 dom 객체 작업의 매핑만 신경 쓰면 됩니다. 데이터를 논리적으로 처리합니다.

【관련 추천 기사: vue.js】

데이터 중심이란 무엇입니까

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

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

vuejs에서 이 기능을 구현하는 과정에서는 버튼 요소에 이벤트를 지정하고 해당 복사본의 속성을 선언하기만 하면 됩니다. 이벤트를 클릭하면 속성 값이 변경되고, 텍스트의 텍스트도 변경됩니다. 해당 요소가 자동으로 전환될 수 있습니다. 이전처럼 수동으로 DOM을 작동할 필요가 없습니다.

간단히 말하면, vuejs는 데이터와 DOM 객체 작업 간의 매핑을 캡슐화하는 데 도움이 됩니다. 데이터의 논리적 처리에만 신경 쓰면 페이지를 다시 렌더링하도록 자연스럽게 알릴 수 있습니다.

이것은 우리에게 더 이상 코드에서 DOM을 자주 조작할 필요가 없습니다. 실제 프로젝트에서는 요소가 수정된 후 페이지를 다시 렌더링하기 위해 코드의 상당 부분을 수동으로 조작합니다. 페이지가 점점 더 복잡해지면 페이지 코드 구성을 유지 관리하기가 점점 더 어려워집니다. 동시에 DOM에서 JS를 자주 작동하면 페이지 코드에 오류가 발생할 확률이 높아집니다. 페이지 보기 표시가 JS 코드에 통합되므로 페이지 보기 업그레이드에 적합하지 않습니다. 표시하다.

그럼 vuejs는 어떻게 이런 종류의 데이터 드라이브를 구현하나요?

MVVM 프레임워크

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

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

• View: 뷰 부분을 의미하며, 프론트엔드에 해당하는 dom

• Viewmodel:은 뷰와 데이터를 연결하는 미들웨어

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

Vue.js의 데이터 기반 구현

데이터 기반 구현의 경우 타이머를 통해 이 기능을 간단하게 구현할 수 있습니다. 타이머는 객체 데이터를 정기적으로 모니터링하고, 타이머는 데이터 변경 사항을 모니터링하여 인터페이스를 업데이트할지 여부를 결정합니다.

    a = 1;
    function renderDom(){
        document.getElementById('app').innerHTML = '数据是' + a;
    }
    
    function watcher(method){
        var b = a;
        method.apply();
         return setInterval(function(){
           if(b != a){
                method.apply();
                b = a;
           }
        }, 1000)
    }
    watcher(renderDom);

물론 vuejs는 이렇게 간단하고 폭력적인 방식으로 구현할 수 없습니다. vuejs는 관찰자를 구현하여 데이터 기반입니다.

먼저 인스턴스화 프로세스 중에 vuejs는 인스턴스화된 객체 옵션에 전달된 데이터 옵션을 순회하고 모든 속성을 순회하며 Object.defineProperty를 사용하여 이러한 모든 속성을 getter/setter로 변환합니다.

동시에 각 인스턴스 객체에는 감시자 인스턴스 객체가 있습니다. 템플릿 컴파일 과정에서 getter를 사용하여 데이터 속성에 액세스합니다. 이때 감시자는 사용된 데이터 속성을 종속성으로 기록합니다. 뷰와 데이터 간의 연결. 나중에 렌더링 뷰의 데이터 종속성이 변경되면(즉, 데이터 세터가 호출됨) 감시자는 두 값이 변경되었는지 비교한 다음 뷰에 다시 렌더링하도록 알릴지 여부를 결정합니다.

이것은 소위 데이터 중심 관점을 달성합니다.

관련 무료 학습 권장 사항: JavaScript(동영상)

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