当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解Vue双向数据绑定原理解析

详解Vue双向数据绑定原理解析

2017年12月12日  | 移动技术网IT编程  | 我要评论

基本原理

vue.采用数据劫持结合发布者-订阅者模式的方式，通过object.defineproperty()来劫持各个属性的setter和getter，数据变动时发布消息给订阅者，触发相应函数的回调。

思路整理

要实现mvvm的双向绑定，需要实现如下几点：

1.实现一个数据监听器observer，能够对对象的所有属性进行监听，发生变化时拿到最新值通知订阅者
2.实现一个解析器compile，对每个子元素节点的指令进行扫描和解析，根据模板指令替换数据，初始化视图以及绑定相应的回调函数；
3.实现一个watcher，作为observer和compile的桥梁，能够订阅属性变动的通知，执行指令绑定的回调函数，更新视图
4.mvvm的入口，整合以上三者

流程图如下：

分布实现

1. mvvm.js

function mvvm(options) {
  this.$options = options || {};
  var data = this._data = this.$options.data;
  var me = this;

  // 数据代理
  // 实现 vm.xxx -> vm._data.xxx
  object.keys(data).foreach(function(key) {
    me._proxydata(key);
  });
  // 代理计算属性
  // 同样通过object.defineproperty进行劫持
  this._initcomputed();

  observe(data, this);

  this.$compile = new compile(options.el || document.body, this)
}

mvvm.prototype = {
  $watch: function(key, cb, options) {
    new watcher(this, key, cb);
  }
}

mvvm入口文件，整合observer/compile/watcher三者，达到数据变化->更新视图；视图变化->数据变更的双向绑定效果。（结合钩子函数，理解vue生命周期中各个阶段的作用）

2. observer.js

function observer(data) {
  object.keys(data).foreach(function() {
    definereactive(data, key, data[key]);
  });
}
function definereactive (data, key, val) {
  var dep = new dep();
  var childobj = observe(val);

  object.defineproperty(data, key, {
    enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get: function() {
      if (dep.target) {
        dep.depend();
      }
      return val;
    },
    set: function(newval) {
      if (newval === val) {
        return;
      }
      val = newval;
      // 新的值是object的话，进行监听
      childobj = observe(newval);
      // 通知订阅者
      dep.notify();
    }
  });
}

对需要监测的对象的每个属性进行递归遍历，通过object.defineproperty设置setter和getter。当设置新的属性值时，触发相应的setter，通知订阅者。

function dep() {
  this.id = uid++;
  this.subs = [];
}
dep.prototype = {
  addsub: function(sub) {
    this.subs.push(sub);
  },
  depend: function() {
    dep.target.adddep(this);
  },
  notify: function() {
    this.subs.foreach(function(sub) {
      sub.update();
    });
  }
};

订阅者模式，每个属性维护一个dep，记录自己的订阅者(即watcher)，notify通知每个订阅者执行相应的update方法，更新视图。

3. compile.js

compile做了两件事情：

1.解析模板指令，替换变量，初始化渲染视图；
2.生成一个watcher，注册回调函数，添加监听数据的订阅者，数据变动时，更新视图

解析流程如下：

1.将dom转成文档碎片fragment，提升查询效率
2.遍历所有元素节点及其子节点，调用对应的指令渲染函数渲染，并调用对应的指令更新函数进行绑定
3.将fragment添加回真实的dom中

遍历元素

function compileelement (el) {
  var childnodes = el.childnodes,
    me = this;
  [].slice.call(childnodes).foreach(function(node) {
    var text = node.textcontent;
    var reg = /\{\{(.*)\}\}/;
    // 解析元素节点
    if (me.iselementnode(node)) {
      me.compile(node);
    // {{}}替换变量
    } else if (me.istextnode(node) && reg.test(text)) {
      me.compiletext(node, regexp.$1);
    }
    // 递归遍历子节点
    if (node.childnodes && node.childnodes.length) {
      me.compileelement(node);
    }
  });
}

编译元素节点

compile: function(node) {
  var nodeattrs = node.attributes,
    me = this;
  [].slice.call(nodeattrs).foreach(function(attr) {
    // 指令以v-xxx命名
    // <span v-html="content"></span>
    var attrname = attr.name; // v-html
    if (me.isdirective(attrname)) {
      var exp = attr.value; // content
      var dir = attrname.substring(2);
      // 事件指令
      if (me.iseventdirective(dir)) {
        compileutil.eventhandler(node, me.$vm, exp, dir);
        // 普通指令
      } else {
        compileutil[dir] && compileutil[dir](node, me.$vm, exp);
      }
      node.removeattribute(attrname);
    }
  });
}

指令处理与更新函数

var compileutil = {
  html: function(node, vm, exp) {
    this.bind(node, vm, exp, 'html');
  },
  
  bind: function(node, vm, exp, dir) {
    var updaterfn = updater[dir + 'updater'];
    // 第一次初始化视图
    updaterfn && updaterfn(node, this._getvmval(vm, exp));
    // 实例化watcher，添加订阅者
    new watcher(vm, exp, function(value, oldvalue) {
      // 属性变化的视图更新函数
      updaterfn && updaterfn(node, value, oldvalue);
    });
  },
}

var updater = {
  htmlupdater: function(node, value) {
    node.innerhtml = typeof value == 'undefined' ? '' : value;
  }
}

4. watcher.js

watcher作为observer与compile之间通信的桥梁，属性变化的订阅者，做了如下的事情：

1.自身实例化时在属性订阅器集合dep里添加自己
2.自身需有update方法
3.调用dep.notice时，watcher调用自身的update ,触发compile中定义的回调

function watcher(vm, exporfn, cb) {
  this.cb = cb;
  this.vm = vm;
  this.exporfn = exporfn;
  this.value = this.get();
}

watcher.prototype = {
  update: function() {
    this.run();
  },
  run: function() {
    var value = this.get();
    var oldval = this.value;
    if (value !== oldval) {
      this.value = value;
      this.cb.call(this.vm, value, oldval);
    }
  },
  get: function() {
    dep.target = this;
    var value = this.getter.call(this.vm, this.vm);
    dep.target = null;
    return value;
  }
};

这里需要注意的点是，实例化watcher的时候，调用get方法，通过dep.target = curinstance，强行触发获属性值的getter方法，在属性的订阅器中添加当前watcher实例。

小结

双向绑定的原理很简单，通过数据劫持，当设置新属性值的时候通过订阅者更新视图；编译指令，替换变量，同时绑定更新函数到订阅者；对应事件绑定调用addeventlistener进行监听。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网