欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

全面解析vue中的数据双向绑定

程序员文章站 2022-04-09 15:05:19
1.vue中数据的双向绑定采用的时候,数据劫持的模式。其实主要是用了es5中的object.defineproperty;来劫持每个属性的getter,和setter。这也...

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中的数据双向绑定,希望对大家有所帮助