Vue, Angle 및 React를 사용하여 양방향 데이터 바인딩을 구현하는 방법

이 글은 주로 Vue, Angle, React 데이터의 양방향 바인딩 원리에 대한 간략한 분석을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴보겠습니다

전통적인 방법

프런트엔드 유지 관리 상태, DOM을 수동으로 조작하여 뷰를 업데이트합니다. 프런트엔드 프레임워크는 템플릿을 통해 서버 데이터를 렌더링합니다. 사용자가 작업을 수행하면 document.getElementBy를 통해 DOM을 수동으로 업데이트합니다...
프레임워크는 데이터와 뷰를 분리하는 데 도움이 됩니다. 프레임워크는 처음으로만 렌더링하고 상태 모니터링 변경 사항을 추적하지 않기 때문에 후속 상태 업데이트에는 DOM의 수동 조작이 필요합니다.

양방향 데이터 바인딩

프론트엔드 개발에서 MV* 모델을 채택할 때, M - 모델은 데이터인 모델을 의미하고, V - 뷰는 데이터인 뷰를 의미합니다. 페이지에 부분이 표시됩니다. 일반적으로 서버에서 얻은 데이터를 "렌더링"하여 뷰에 표시하는 코드를 작성해야 합니다. 데이터가 변경될 때마다 뷰가 데이터와 일치하도록 뷰를 업데이트하기 위해 다시 렌더링합니다.

페이지는 사용자 상호 작용을 통해 상태 및 데이터의 변경 사항도 생성합니다. 이때 뷰의 업데이트를 백엔드 서버에 동기화하는 코드를 작성합니다. 즉,

프런트엔드 MV* 프레임워크마다 모델과 뷰 간의 데이터 동기화를 위한 처리 방법이 다릅니다. Backbone에서는 Model에서 View로 데이터를 전송할 때 Model이 업데이트될 때마다 View에서 Model의 변경 이벤트를 수신할 수 있습니다. View에서 Model로의 데이터 전송은 View에 해당하는 DOM 요소의 다양한 이벤트를 모니터링할 수 있으며, View 상태의 변화를 감지한 후 변경된 데이터를 Model로 전송합니다(양측의 Listening 이벤트를 통해). Backbone과 비교하여 AngularJS로 대표되는 MVVM 프레임워크는 한 단계 더 나아가 프레임워크 수준에서 이 데이터 동기화 메커니즘을 지원하며 양방향 데이터 바인딩입니다.

다른 MVVM 프레임워크에서 양방향 데이터 바인딩은 다음과 같습니다. 구현된 기술이 차이를 만듭니다.

AngularJS는 "더티 값 감지" 방법을 채택합니다. 데이터가 변경된 후 모든 데이터와 뷰 간의 바인딩 관계를 감지하여 모든 변경 사항이 처리되어 다른 데이터가 추가로 발생할 수 있는지 확인합니다. 변경되었으므로 더 이상 데이터 변경이 발생하지 않을 때까지 이 프로세스가 여러 번 순환될 수 있으며, 그런 다음 변경된 데이터가 보기로 전송되고 페이지가 업데이트됩니다. ViewModel의 데이터가 수동으로 변경되는 경우 변경 사항이 뷰에 동기화되도록 하려면 "더티 값 감지"를 수동으로 트리거해야 합니다.

VueJS는 ES5에서 제공하는 Object.defineProperty() 메서드를 사용하여 데이터 작업을 모니터링하여 자동으로 데이터 동기화를 트리거합니다. 또한 동기화가 서로 다른 데이터에 대해 실행되므로 모든 데이터에 대해 테스트를 수행하는 대신 변경 내용을 바인딩된 뷰에 정확하게 전송할 수 있습니다.

Vue 양방향 데이터 바인딩은

데이터와 뷰의 바인딩 및 동기화를 구현하며, 이는 궁극적으로 데이터를 읽고 쓰는 과정, 즉 Object.defineProperty( ). Vue의 함수는 DefineReactive입니다. 구현의 단순화된 버전에서는 몇 가지 기본 기능만 유지했습니다.

  function defineReactive(obj, key, value){
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactGetter(){
        if(Dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactSetter(newVal){
        if (value === newVal) {
          return;
        } else {
          value = newVal;
          //如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

데이터를 읽을 때 현재 Watcher(데이터 관찰자)가 있는 경우 Watcher는 새 데이터가 뷰로 전송됨) 감시자는 현재 데이터에 바인딩됩니다(dep.dependent(), dep는 현재 데이터를 모든 감시자 종속성과 연결). 이는 종속성을 확인하고 기록하는 프로세스입니다. 데이터를 할당할 때 데이터가 변경되면 모든 감시자에게 알림이 전송됩니다(dep.notify() 사용). 이런 방식으로 데이터를 수동으로 변경하더라도 프레임워크는 자동으로 데이터를 뷰에 동기화할 수 있습니다.

데이터 바인딩 관계 식별 과정

Vue와 AngularJS에서는 뷰 요소와 데이터 간의 바인딩 관계를 HTML에 명령어를 추가하여 선언합니다

  <form id="test">
    <input type="text" v-model="name">
  </form>

위 HTML 코드는 입력을 나타냅니다. 요소는 이름에 바인딩됩니다. 데이터. JS 코드에서 다음과 같이 초기화할 수 있습니다:

  var vm = new Vue({
   el: '#test',
   data: {
    name: 'sysuzhyupeng'
   }
  })

코드가 올바르게 실행되면 페이지의 입력 요소에 해당하는 위치에 위 코드에 지정된 초기 값인 sysuzhyupeng이 표시됩니다.

vm.name = 'zhyupeng'을 실행한 후 페이지의 입력도 다음과 같이 업데이트됩니다: zhyupeng. 페이지 텍스트 상자의 내용을 yupeng으로 수정하면 vm.name을 통해 얻은 값은 'yupeng'

React 데이터 바인딩

React는 가상 DOM 트리의 업데이트를 고려하여 이 방법을 사용합니다.

1. 속성 업데이트는 구성 요소 자체에서 처리됩니다

2. 구조 업데이트, 하위 트리(가상 DOM) 다시 렌더링, 최소 수정 단계 찾기, DOM 작업 패키징, 실제 DOM 트리 패치

순전히 데이터 바인딩의 관점에서 보면 React 가상 DOM은 데이터 바인딩 없음, setState()는 이전 상태(상태는 폐기됨)를 유지하지 않기 때문에 바인딩이 없습니다

데이터 업데이트 메커니즘의 관점에서 React는 데이터 모델을 제공하는 방식과 유사합니다(업데이트해야 함). 상태를 통해)

양방향 데이터가 없습니다. 바인딩하는 경우 양방향 입력 시나리오를 어떻게 구현하나요? 프레임워크에서 제공하는 API를 통해 데이터 변경 사항을 수동으로 알리는 것은 DOM을 운영하는 방식과 매우 유사합니다

위 내용은 제가 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

JS에서 마우스 효과에 따른 교차 좌표 구현 방법

jQuery에서 EasyUI 창을 사용하는 방법

Angular4.0에서laydate.js 날짜 플러그인을 사용하는 방법

위 내용은 Vue, Angle 및 React를 사용하여 양방향 데이터 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!