Vue의 양방향 데이터 바인딩 원리에 대한 연구

양방향 바인딩의 개념

양방향 데이터 바인딩의 개념은 데이터 레이어와 UI 레이어 중 하나가 변경되면 데이터가 동기화되는 것입니다. 다른 항목에 동기적으로 업데이트됩니다.

양방향 바인딩의 몇 가지 방법

현재 프런트엔드에서 양방향 데이터 바인딩을 구현하는 방법은 대략 세 가지가 있습니다.

1. ( backbone.js)

아이디어: 사용자 정의 데이터 속성을 사용하여 HTML 코드에서 바인딩을 지정합니다. 바인딩된 모든 JavaScript 개체와 DOM 요소는 게시자 개체에 "구독"됩니다. JavaScript 개체 또는 HTML 입력 필드가 변경된 것으로 감지될 때마다 이벤트를 게시자-구독자 패턴에 위임하고 변경 사항을 바인딩된 모든 개체 및 요소에 브로드캐스팅하고 전파합니다.

2. 손상 값 감지(angular.js)

아이디어: 폴링을 통해 데이터 변경을 감지합니다. 특정 이벤트가 발생한 경우에만 도난품 감지가 입력됩니다.

은 대략 다음과 같습니다.

• 사용자가 텍스트를 입력하거나 버튼을 클릭하는 등의 DOM 이벤트입니다. (ng-클릭)

• XHR 응답 이벤트($http)

• 브라우저 위치 변경 이벤트($location)

• 타이머 이벤트($timeout, $interval )

• $digest() 또는 $apply() 실행

3. 데이터 하이재킹(vue.js)

아이디어: Object.defineProperty를 사용하여 데이터 객체에 속성을 지정합니다. get 및 set 모니터링은 데이터 읽기 및 할당 작업이 있을 때 노드의 명령을 호출하므로 가장 일반적인 = 등호 할당이 트리거될 수 있습니다.

Wue 양방향 데이터 바인딩 작은 데모 아이디어

① Wue 객체를 구성하고, 객체의 el 및 data 속성을 정의하고, 객체 생성 시 해당 데이터를 전달하고, init를 실행합니다. () 방법.

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

② Init 메소드에서 BindText 및 BindModel 메소드가 실행됩니다. 이 두 메소드는 dom 및 프로세스에서 w-model 및 w-text 명령어에 바인딩된 html을 구문 분석합니다. 그에 따라.

init:function(){
  this.bindText();
  this.bindModel();
 }

3 binText 메소드, w-text 지시어가 있는 요소를 배열에 배치합니다(예: w-text='demo'). 그런 다음 innerHTML 값을 전달된 수신 데이터[데모].

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

IVbindModel 메소드는 w-model 명령(일반적으로 양식 관련 요소)이 있는 요소를 배열에 넣습니다(예: w-model='demo'). 각 요소는 다음과 같습니다. keyup 이벤트에 바인딩됩니다(브라우저 쓰기와 호환 가능).

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}

⑤ Object.defineProperty를 사용하여 set 및 get 메소드를 정의하고 set 메소드에서 binText 메소드를 호출합니다. 이는 입력에서 w-model의 값이 변경되면 사용되며 set 메소드가 자동으로 실행되므로 이 메소드에서는 w-text를 업데이트하는 메소드만 호출할 수 있습니다.

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log('Browser not support!')
  }
 }

⑥

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>

사용 위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되기를 바라며, 또한 PHP 중국어 지원 웹사이트가 더 많아지기를 바랍니다!

Vue 양방향 데이터 바인딩 원칙에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!