首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

解析Vue2.0双向绑定实现原理

Posted in Javascript onFebruary 23, 2017

一、实现双向绑定的做法

前端MVVM最令人激动的就是双向绑定机制了，实现双向数据绑定的做法大致有如下三种：

1.发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

  • DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

3.数据劫持（Vue.js）

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

由此可见，Object.defineProperty() 这个API是Vue实现双向数据绑定的关键，我们先简单了解下这个API，了解更多戳这里

二、Object.defineProperty()

简单例子：

var obj = {};
  Object.defineProperty(obj, 'hello', {
    get: function() {
      console.log('get val:'+ val);
      return val;
   　 },
  set: function(newVal) {
      val = newVal;
      console.log('set val:'+ val);
    }
  });
  obj.hello;
  obj.hello='111';

结果：

解析Vue2.0双向绑定实现原理

如果去掉 obj.hello=‘111' 这行代码，则get的返回值val会报错val is not defined。可见Object.defineProperty() 监控对数据的操作，可以自动触发数据同步。下面我们先用Object.defineProperty()来实现一个非常简单的双向绑定。

三、实现简单的双向绑定

 最简单例子：

<!DOCTYPE html>
 <head></head>
 <body>
 <div id="app">
  <input type="text" id="a">
  <span id="b"></span>
 </div>

 <script type="text/javascript">
  var obj = {};
  Object.defineProperty(obj, 'hello', {
    get: function() {
      console.log('get val:'+ val);
      return val;
    },
    set: function(newVal) {
      val = newVal;
      console.log('set val:'+ val);
      document.getElementById('a').value = val;
      document.getElementById('b').innerHTML = val;
    }
  });
  document.addEventListener('keyup', function(e) {
   obj.hello = e.target.value;
  });
  </script>
 </body>
</html>

实现效果如下：

解析Vue2.0双向绑定实现原理

上面例子直接用了dom操作改变了文本节点的值，而且是在我们知道是哪个id的情况下，通过document.getElementById 获取到相应的文本节点，然后直接修改文本节点的值，这种做法是最简单粗暴的。

封装成一个框架，肯定不能是这种做法，所以我们需要一个解析dom，并能修改dom中相应的变量的模块。

四、实现简单Compile

首先我们需要获取文本中真实的dom节点，然后再分析节点的类型，根据节点类型做相应的处理。

在上面例子我们多次操作了dom节点，为提高性能和效率，会先将所有的节点转换城文档碎片fragment进行编译操作，解析操作完成后，再将fragment添加到原来的真实dom节点中。

<!DOCTYPE html>
 <head></head>
 <body>
 <div id="app">
  <input type="text" id="a" v-model="text">
  {{text}}
 </div>
　<script type="text/javascript">
function Compile(node, vm) {
   if(node) {this.$frag = this.nodeToFragment(node, vm);
    return this.$frag;
   }
  }
  Compile.prototype = {
   nodeToFragment: function(node, vm) {
    var self = this;
    var frag = document.createDocumentFragment();
    var child;

    while(child = node.firstChild) {
     self.compileElement(child, vm);
     frag.append(child); // 将所有子节点添加到fragment中，child是指向元素首个子节点的引用。将child引用指向的对象append到父对象的末尾，原来child引用的对象就跳到了frag对象的末尾，而child就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了
    }
    return frag;
   },
   compileElement: 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');
      }
     };
    }
    //节点类型为textif(node.nodeType === 3) {
     if(reg.test(node.nodeValue)) {
      var name = RegExp.$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 Compile(document.getElementById(id),this);
   // 编译完成后，将dom返回到app中
   document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
   el: 'app',
   data: {
    text: 'hello world'
   }
  });
 </script>
 </body>
</html>

结果：

解析Vue2.0双向绑定实现原理

到这，我们做到了获取文本中真实的dom节点，然后分析节点的类型，并能处理节点中相应的变量如上面代码中的{{text}}，最后渲染到页面中。接着我们需要和双向绑定联系起来，实现{{text}}响应式的数据绑定。

五、实现简单observe

简单的observe定义如下：

解析Vue2.0双向绑定实现原理

需要监控data的属性值，这个对象的某个值赋值，就会触发setter，这样就能监听到数据变化。然后注意vm.data[name]属性将改为vm[name]

解析Vue2.0双向绑定实现原理

完整代码如下：

<!DOCTYPE html>
 <head></head>
 <body>
 <div id="app">
  <input type="text" id="a" v-model="text">
  {{text}}
 </div>
<script type="text/javascript">
function Compile(node, vm) {
   if(node) {
    this.$frag = this.nodeToFragment(node, vm);
    return this.$frag;
   }
  }
  Compile.prototype = {
   nodeToFragment: function(node, vm) {
    var self = this;
    var frag = document.createDocumentFragment();
    var child;

    while(child = node.firstChild) {
     self.compileElement(child, vm);
     frag.append(child); // 将所有子节点添加到fragment中
    }
    return frag;
   },
   compileElement: 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[name]= e.target.value;
       });
       node.value = vm[name]; // 将data的值赋给该node
       node.removeAttribute('v-model');
      }
     };
    }
    //节点类型为text
    if(node.nodeType === 3) {
     if(reg.test(node.nodeValue)) {
      var name = RegExp.$1; // 获取匹配到的字符串
      name = name.trim();
      node.nodeValue = vm[name]; // 将data的值赋给该node
      // new Watcher(vm, node, name);
     }
    }
   },
  }
  function defineReactive (obj, key, val) {
   Object.defineProperty(obj, key, {
    get: function() {
     return val;
    },
    set: function (newVal) {
     if(newVal === val) return;
     val = newVal;
     console.log(val);
    }
   })
  }
  function observe(obj, vm) {
   Object.keys(obj).forEach(function(key) {
    defineReactive(vm, key, obj[key]);
   })
  }
 　 function Vue(options) {
   this.data = options.data;
   var data = this.data;
   observe(data, this);
   var id = options.el;
   var dom =new Compile(document.getElementById(id),this);
   // 编译完成后，将dom返回到app中
   document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
   el: 'app',
   data: {
    text: 'hello world'
   }
  });
 </script>
 </body>
</html>

结果：

解析Vue2.0双向绑定实现原理

到这，虽然set方法触发了，但是文本节点{{text}}的内容没有变化，要让绑定的文本节点同步变化，我们需要引入订阅发布模式。

六、订阅发布模式

订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

首先我们要一个收集订阅者的容器，定义一个Dep作为主题对象

解析Vue2.0双向绑定实现原理

然后定义订阅者Watcher

解析Vue2.0双向绑定实现原理

添加订阅者Watcher到主题对象Dep，发布者发出通知放到属性监听里面

解析Vue2.0双向绑定实现原理

最后需要订阅的地方

解析Vue2.0双向绑定实现原理

至此，比较简单地实现了我们第三步用dom操作实现的双向绑定效果，代码：

<!DOCTYPE html>
 <head></head>
 <body>
 <div id="app">
  <input type="text" id="a" v-model="text">
  {{text}}
 </div>
 <script type="text/javascript">
function Compile(node, vm) {
   if(node) {
    this.$frag = this.nodeToFragment(node, vm);
    return this.$frag;
   }
  }
  Compile.prototype = {
   nodeToFragment: function(node, vm) {
    var self = this;
    var frag = document.createDocumentFragment();
    var child;

    while(child = node.firstChild) {
     self.compileElement(child, vm);
     frag.append(child); // 将所有子节点添加到fragment中
    }
    return frag;
   },
   compileElement: 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[name]= e.target.value;
       });
       // node.value = vm[name]; // 将data的值赋给该node
       new Watcher(vm, node, name, 'value');
      }
     };
    }
    //节点类型为text
    if(node.nodeType === 3) {
     if(reg.test(node.nodeValue)) {
      var name = RegExp.$1; // 获取匹配到的字符串
      name = name.trim();
      // node.nodeValue = vm[name]; // 将data的值赋给该node
      new Watcher(vm, node, name, 'nodeValue');
     }
    }
   },
  }
  function Dep() {
   this.subs = [];
  }
  Dep.prototype = {
   addSub: function(sub) {
    this.subs.push(sub);
   },
   notify: function() {
    this.subs.forEach(function(sub) {
     sub.update();
    })
   }
  }
  function Watcher(vm, node, name, type) {
   Dep.target = this;
   this.name = name;
   this.node = node;
   this.vm = vm;
   this.type = type;
   this.update();
   Dep.target = null;
  }

  Watcher.prototype = {
   update: function() {
    this.get();
    this.node[this.type] = this.value; // 订阅者执行相应操作
   },
   // 获取data的属性值
   get: function() {
    this.value = this.vm[this.name]; //触发相应属性的get
   }
  }
  function defineReactive (obj, key, val) {
   var dep = new Dep();
   Object.defineProperty(obj, key, {
    get: function() {
      //添加订阅者watcher到主题对象Dep
     if(Dep.target) {
      // JS的浏览器单线程特性，保证这个全局变量在同一时间内，只会有同一个监听器使用
      dep.addSub(Dep.target);
     }
     return val;
    },
    set: function (newVal) {
     if(newVal === val) return;
     val = newVal;
     console.log(val);
     // 作为发布者发出通知
     dep.notify();
    }
   })
  }
  function observe(obj, vm) {
   Object.keys(obj).forEach(function(key) {
    defineReactive(vm, key, obj[key]);
   })
  }

 　 function Vue(options) {
   this.data = options.data;
   var data = this.data;
   observe(data, this);
   var id = options.el;
   var dom =new Compile(document.getElementById(id),this);
   // 编译完成后，将dom返回到app中
   document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
   el: 'app',
   data: {
    text: 'hello world'
   }
  });
 </script>
 </body>
</html>

七、总结

关于双向绑定的实现，看了网上很多资料，开始看到是对Vue源码的解析，看的过程似懂非懂。后来找到参考资料1，然后自己跟着实现一遍，才理解许多。感谢这篇文章的作者，写的由浅入深，比较好理解。为了加深自己的理解，于是自己顺着这个思路写下这个笔记。本文主要了解了几种双向绑定的做法，然后先用原生JS，dom操作实现一个最简单双向绑定，在这个基础上进行改装，为减少dom操作，实现简单的Compile(编译HTML)；接着为了实现数据监听，实现observe；最后为了实现数据的双向绑定实现订阅发布模式。

虽然实现的比较简单，有很多功能没有考虑，不过这个过程还是可以理解到Vue实现双向绑定的原理。过程中，有思考：

1. Vue的源代码中，用了文档碎片fragment作为真实节点的存储吗？

之前有听说用VDOM，在Vue源代码中，也找过是否有创建文档碎片，结果没找到。看了参考资料4中，VDOM的介绍，好像是把节点用JS对象模拟。类似：

模板

<ul id='list'>
 <li class='item'>Item 1</li>
 <li class='item'>Item 2</li>
 <li class='item'>Item 3</li>
</ul>

js对象

var element = {
 tagName: 'ul', // 节点标签名
 props: { // DOM的属性，用一个对象存储键值对
  id: 'list'
 },
 children: [ // 该节点的子节点
  {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
  {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
  {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
 ]
}

恩，这就又牵扯出模板了。先收住，我先尽量把简单的搞懂。

2.Compile模块对v-model节点的解析，事件的绑定，我只实现简单的，特定的v-model，还有其它事件绑定如v-on等没有分析，看了别人的代码，情况一多起来，看得就有些吃力，希望后面自己会再来完善，给自己定一个这样的框架在这.

代码：戳这里

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

解析Vue2.0双向绑定实现原理

- Author -

wj704

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
T-SQL(1) GTID(1) 表变量(1) 游标(1) ip连接(1) 临时表(1) 重复数据(2) ECharts(3) 排序失效(1) timestamp(1)
You might like
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖
2017/03/01 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python的pytest框架之命令行参数详解（下）
2019/06/27 Python
python 搜索大文件的实例代码
2019/07/08 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
巴西葡萄酒销售网站：Wine.com.br
2017/11/07 全球购物
C语言50道问题
2014/10/23 面试题
文员个人求职自荐信
2013/09/21 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
酒店个人求职信范文
2014/01/25 职场文书
创先争优一句话承诺
2014/05/29 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
股东出资协议书
2016/03/21 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android