vue 의 데이터 양 방향 바 인 딩 을 전면적으로 분석 합 니 다.

1.vue 에서 데이터 의 양 방향 바 인 딩 을 사용 할 때 데이터 납치 모드 입 니 다.사실은 주로 Es5 의 Object.defineProperty 를 사 용 했 습 니 다.모든 속성의 getter 와 setter 를 납치 합 니 다.바로 Vue 가 IE8 이하 와 호 환 되 지 않 는 이유 다.
2.Object.defineProerty();

var obj = {};
    Object.defineProperty(obj,"hello",{
      enumerable: true,   //           for -- in    (     );
      configurable: true,  //          delete   
      get(){ //     ，        
        return this.val;
      },
      set(newVale){ //       (   :                      )
        this.val = newVale + 5; 
        console.log(this.val); // 10
      }
    })
    obj.hello = 5;
    console.log(obj.hello) ; // 10

3.간단 한 양 방향 연결 실현

<input type="text" id="a">
<div id="b"></div>
<script type="text/javascript">
  var obj = {};
  Object.defineProperty(obj,`value`,{
    enumerable: true,
    configurable: true,
    get(){
      return this.val;
    },
    set(newValue){
      document.getElementById(`b`).innerText = newValue;
      this.val = newValue; //66
    }
  });
  document.getElementById(`a`).addEventListener(`input`,function(event){
    var text = event.target.value; //66
    obj.value = text;
  },false)
</script>

이런 방식 은 간단 하고 거 칠 어서 DOM 조작 을 통 해 직접 귀속 을 완성 한다.나 는 분명히 누군가가 네가 이렇게 쓰 는 것 이 input 사건 에서 Id 가 B 인 DOM 요소 에 직접 값 을 부여 하 는 것 이 쓸데없는 짓 이 아니 냐 고 생각 할 것 이 라 고 생각한다.아래 틀 에서 우리 가 어떻게 실현 해 야 하 는 지 보 세 요.
4.간단 한 실현  v-model
먼저 문서 의 실제 요소 노드,즉 VUE 의 실제 열 화 된 VUE 의 요소 마 운 트 지점(el)을 가 져 와 야 합 니 다.createDocumentFragment 를 통 해 문서 조각 을 만 들 고 분석 작업 이 끝 난 후 조각 을 DOM 에 배치 합 니 다.

<div id="app">
  <input type="text" id="a" v-model="text">
  {{text}}
</div>
　<script type="text/javascript">
  function Model(node, vm) {
    if(node) {this.$frag = this.nodeToFragment(node, vm);
      return this.$frag;
    }
  }
  Model.prototype = {
    construtor:'Model',
    nodeToFragment: function(node, vm) {
      var self = this;
      var frag = document.createDocumentFragment();
      var child;
      while(child = node.firstChild) {
        self.moelElement(child, vm);
        frag.appendChild(child); 
//          fragment ，child             。
//  child       append       ，  child         frag     ，
//  child                 。      ，         
      }
      return frag;
    },
    moelElement: function(node, vm) {
      var reg = /\{\{(.*)\}\}/; //   {{}} ()        
      //       
      if(node.nodeType === 1) {
        var attr = node.attributes;
        //     
        for(var i = 0; i < attr.length; i++ ) {
          if(attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; //   v-model      
            node.addEventListener('input', function(e) {
              //     data    ，        set  
              vm.data[name]= e.target.value;
            });
            node.value = vm.data[name]; //  data     node
            node.removeAttribute('v-model');
          }
        };
      }
      //     text
      if(node.nodeType === 3) {
        if(reg.test(node.nodeValue)) {
          var name = RegExp.$1; //           ()       。  $1       
          name = name.trim();
          node.nodeValue = vm.data[name]; //  data     node
        }
      }
    },
  }
  function Vue(options) {
    this.data = options.data;
    var data = this.data;
    var id = options.el;
    var dom =new Model(document.getElementById(id),this);
    //      ， dom   app 
    document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
    el: 'app',
    data: {
      text: 'hello world'
    }
  });
</script>

이곳 에 서 는 주로 VUE 에서 명령 에 대한 처 리 를 배 웠 다.여기까지 사용자 정의 명령 만 추가 할 수 있 습 니 다.사용자 정의 명령 이 어떻게 이 루어 졌 는 지도 알 게 되 었 다.물론 데이터 의 양 방향 연결 은 아직 실현 되 지 않 았 다.
위 에서 말 한 것 은 편집장 이 소개 한 vue 의 데이터 양 방향 연결 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!