vue的双向绑定思想(梁王的代码解剖室)

作者: 梁王io | 来源:发表于2017-07-09 11:14 被阅读555次

简单双向绑定代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Two-way data-binding</title>
</head>
<body>
  
  <div id="app">
    <input type="text" v-model="text">
    {{ text }}
  </div>

  <script>
    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      });
    }
    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加订阅者watcher到主题对象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作为发布者发出通知
          dep.notify();
        }
      });
    }
    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;
      
      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }
      return flag;
    }
    function compile (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');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 节点类型为text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }
    function Watcher (vm, node, name, nodeType) {
      Dep.target = this;
      this.name = name;
      this.node = node;
      this.vm = vm;
      this.nodeType = nodeType;
      this.update();
      Dep.target = null;
    }
    Watcher.prototype = {
      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 获取data中的属性值
      get: function () {
        this.value = this.vm[this.name]; // 触发相应属性的get
      }
    }
    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };
    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 编译完成后，将dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }
    var vm = new Vue({
      el: 'app',
      data: {
        text: 'hello world'
      }
    });
  </script>

</body>
</html>

demo地址

deom 其实没有，你们自己拷贝代码到本地跑一下吧。

分析

我们以两个方面来分析，一个是View到data，就是在这个代码里当你在input里面修改值的时候，data里面text的值也会变化。
另一个是data到view，就是当你调整text的值的时候view上对应的部分也会变化。
vue的双向绑定是基于Object.defineProperty实现的，请读者先自行了解一下。

data到view的绑定

data到view就是数据变化会渲染到视图上，也就是代码中的text变化会改变div内{{text}}的显示。
这一部分分几个步骤

首先是最初渲染的时候将数据渲染到视图上
其次是监听数据的变动，变动后通知view更新

最初渲染

我们先来看看构造函数里面

    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 编译完成后，将dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }

初始化的时候有一句

var dom = nodeToFragment(document.getElementById(id), this);
document.getElementById(id).appendChild(dom);

这一句话实现初始化的时候将数据渲染到视图上，现在我们进nodeToFragment里面看看

    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;
      
      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }
      return flag;
    }

这里可以注意到的是使用了一个createDocumentFragment

这里我们插入一下，这个东西创建的文档碎片最后还是用appendChild插入了，那么为什么要用这个？其实是出于性能的考虑
我们先回顾一下一旦把节点插入到文档流会发生什么，我们了解到当需要对页面DOM进行操作的时候必然会导致多次重绘、回流(repaint, reflow)。这里顺便附一下我的另一个博客重绘与回流(repaint and reflow) -- 前端性能(梁王的理论自习室)
我们可以知道，在更新少量节点的时候可以之间向document.body节点中添加，但是当要向document中添加大量数据是，如果逐个添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法产生一次回流和重绘，为了提高性能，可以使用一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中，减少了重新渲染的次数提高了性能。

让我们回到代码，下面遍历node的节点

      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }

其实刚开始看这个我有点疑惑这个循环的写法，为啥是child = node.firstChild，不过后来我才知道appendChild是把一个节点给"移"到flag上，也就是说移动之后node里面就没有这个child节点了，所以这样可以遍历node的所有孩子并把它们都移到文档碎片flag上。
`
不过移动之前我们先看一下compile的内容

    function compile (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');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 节点类型为text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }

首先有个nodeType，这个可以去MDN看

nodeType.png

代码里面主要用的只有1和3
如果是元素比如<p> <div>等

        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');
          }
        };
        new Watcher(vm, node, name, 'input');

这里主要是view到data的部分我们先略过，我们主要看new Watcher这里，不过这里我们先不进Watcher里面看，现在先回到vue构造函数里面。

    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 编译完成后，将dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }

在nodeToFragment之前我们有个observe(data,this)
我们先来看看这货

    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      });
    }
    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加订阅者watcher到主题对象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作为发布者发出通知
          dep.notify();
        }
      });
    }

observe遍历data对象里面的所有属性，然后调用了一个defineReactive，这个函数很关键，现在我们来分析一下这个函数

    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加订阅者watcher到主题对象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作为发布者发出通知
          dep.notify();
        }
      });
    }

我们知道，vue实现双向绑定里面一个核心就是使用了ES5的Object.defineProperty，对于这个方法请读者自行阅读文档，这里我只能范范的说当我调用这个方法设置了一个obj的对应key属性的get和set的时候，当我代码里面出现了比如说 var b = o.h的时候，get就会被调用，而当我写了o.h = 123的时候，set就会被调用

这里给个实验代码，读者可以去控制台试试Object.defineProperty

var _keke = {a: 'lwio'}
var o = {}

Object.defineProperty(o, 'h', {
  get: function () {
    console.log('o.h has been got');
    return _keke.a;
  },
  set: function (newVal) {
    console.log('o.h has been assigned');
    _keke.a = newVal;
  }
})

o.h            // lwio(get)
o.h = 'wanse'  // wanse(set)
o.h            // wanse(get)

现在我们回到代码里面，
首先我们看到

var dep = new Dep()

这个是一个发布订阅者模式的一个容器，你当它是和一个obj的一个key相互对应，其保存了监听了data里面某个属性的所有view对象，然后在这个data里面的属性触发set的时候，dep里面的监听者会收到更新

        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作为发布者发出通知
          dep.notify();
        }

    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };

在get中我们可以看到有一个单独看比较有疑惑的语句

if (Dep.target) dep.addSub(Dep.target);

Dep的target在watcher构造时候会被赋值给当这个new出来的Watcher,然后后面会触发data对应属性的get把这个watcher加入Dep里面成为订阅者。
现在我们可以回到Watcher里面了。

Watcher

好了现在我们可以回到watcher了。一个Watcher对应的是一个view对象与某个data属性，一个data属性可以有多个watcher

    function Watcher (vm, node, name, nodeType) {
      Dep.target = this;
      this.name = name;
      this.node = node;
      this.vm = vm;
      this.nodeType = nodeType;
      this.update();
      Dep.target = null;
    }
    Watcher.prototype = {
      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 获取data中的属性值
      get: function () {
        this.value = this.vm[this.name]; // 触发相应属性的get
      }
    }
    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };

代码有点长，我们现在只关注data变化之后怎么将变化与view绑定
先解释一下参数，Watcher里面有4个参数，第一个vm是vue实例这个我们先不管
第二个是node，也就是节点对象，第三个name是绑定data里面的属性，比如v-model="keke"，这个name就是keke。

      Dep.target = this;
      ...
      this.update();
      Dep.target = null;

构造函数里面这一块就是我之前说的，

Dep的target在watcher构造时候会被赋值给当这个new出来的Watcher,然后后面会触发data对应属性的get把这个watcher加入Dep里面成为订阅者。

现在进update看一下

      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 获取data中的属性值
      get: function () {
        this.value = this.vm[this.name]; // 触发相应属性的get
      }

update即实现了触发data某个属性的get从而把当前Watcher加入到dep中，又实现了把data里面某个属性的值赋值给view中的节点。

data到view总结

所以data到view的绑定流程就变成了，data某个属性变化(触发set) -> set中通知了监听这个属性的所有Watcher(dep.notify()) -> Dep调用了所有Watcher的update，把data的值赋给了view中的节点
这就是基于vue的data到view部分的绑定。

view到data

示例代码中，通过v-model绑定的input，在输入内容之后会使得data里面的text的值也进行了对应的修改，现在我们来看一下这一部分是怎么做的。
这一块的核心只有compile这一个函数。
compile的调用是在初始化绑定完之后调用nodeToFragment时遍历所有Node发生的。

    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;

      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }
      return flag;
    }

现在我们进compile里面看看

    function compile (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');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 节点类型为text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }

其实核心的就几行

        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');
          }
        };

这里的实例代码比较简单，就只有input的，vue实际上会比较复杂。
基本就是监听这个input是否产生了变化，产生了变化就改变data的值

            node.addEventListener('input', function (e) {
              // 给相应的data属性赋值，进而触发该属性的set方法
              vm[name] = e.target.value;
            });

view到data的总结

所以data到view的绑定流程就变成了，给view的节点添加事件比如input -> input事件触发的时候吧vue对象里面的data赋值给e.target.value之类的值，以此来实现view的变化同步到data上。
这就是基于vue的data到view部分的绑定。

后序(未完成)

加入vue源码(未完成)

vue的双向绑定思想(梁王的代码解剖室)

简单双向绑定代码

demo地址

分析

data到view的绑定

最初渲染

Watcher

data到view总结

view到data

view到data的总结

后序(未完成)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

javascript高级

Web前端之路

Web 前端开发