前端干活系列----vue核心源码解读

vue如今很是火了，好多人都在用。博主为了提升本身的技术水平，也开始了解读vue的源码。过程很疼苦，多亏了从公众号里看到的一个帖子。博主也不藏私发布出来供你们一块儿欣赏（相关代码在最底部）：
https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651554000&idx=1&sn=08219fe9433fef033b17b98d1072367f&chksm=80255711b752de07e163f621ed848096850130a4484e0c81357917fd6e044a76a3cd5cf17926&scene=0#rdjavascript

提及来这解读的也不是vue的源码，而是这位大神的源码。只是跟vue实现绑定的的原理同样。而我这篇文章也是对他里面源码的一些解读，但愿可以让更多的人更能理解vue。反正博主看懂了以后，对vue的做者崇拜更深了。php

vue原理的实现主要是经过 Object对象的defineProperty属性来完成的。前端

你内心如今可能要骂爹了，就这么一个东西就实现了双向绑定。这不就是一个Object定义属性的一个方法么，不知道你是啥心情，博主反正就是这种心情。可是呢，首先你不能把vue想的太牛逼了，虽然就是很牛逼。可是当你懂了以后你知道他其实并无太复杂，这就是所谓的大道至简吧。也只有这样的代码才会让更多的人感受很美妙不是么。vue

vue的运行能够经过一张图来展现java

这里你不用急着弄懂，等你看了博主一步步的讲解以后这里每个箭头的含义天然而然的就明白了。node

因为正序要好久才会切入界面变化的实现效果，因此博主在这里采用倒序的方式进行讲解。让你从界面上产生的疑惑一步一步的追到根。
segmentfault

根据vue的双向绑定原理，只要input框绑定的值跟div绑定的值是同一个，你修改input框的时候div的值也会发生改变。若是你想用原生js人为的修改div的值找到须要修改的元素，设置一下innerHTML是否是就能够了。你想要修改input的值只须要修改一下value的值是否是就能够了。微信

document.getElementById("**").value="333"document.getElementById("**").innerHtml="333"

因此这里定义了一个Watcher对象来完成这件事情相关代码以下：svg

function Watcher(name, el, vm, exp, attr) {
  this.name = name; //指令名称，例如文本节点，该值设为"text"
  this.el = el; //指令对应的DOM元素
  this.vm = vm; //指令所属myVue实例
  this.exp = exp; //指令对应的值，本例如"number"
  this.attr = attr; //绑定的属性值，本例为"innerHTML"

  this.update();
}

Watcher.prototype.update = function() {
  this.el[this.attr] = this.vm.$data[this.exp];
}

只要实例化一个Watcher，而后想改动页面数据的时候调用一下Watcher的update方法是否是就实现了界面数据的更改。this

如今界面数据的更改你知道了，如今你确定想知道如何通知的Watcher的了吧。从图中你能够看到是Observer发送的通知对吧，而Observer又是new MVVM() 衍生过来的，因此在new MVVM()的原型链中确定有Observer这个方法，上文中提到的defineProperty也是在这里定义的，不懂defineProperty的能够参考下面这篇文章
https://segmentfault.com/a/1190000011294519

defineProperty能够为添加的属性设置set方法，当属性修改了的时候就会执行这个方法，那咱们是否是只须要在set方法里面调用一下咱们定义的Watcher的update方法就能够实现界面数据修改了呢（相关代码在最底部）。

myVue.prototype._obverse = function(obj) {
      .......
      Object.defineProperty(_this.$data, key, {
        .....
        set: function(newVal) {
          if (value !== newVal) {
            value = newVal;
            binding._directives.forEach(function(item) {
              //item就是Watcher对象
              item.update();
            })
          }
        }
      })
    }
  })
}

这样剩下的事情就只有一个了就是图中的compile解析命令了。解析的就是你在模板中加入的b-click,b-model,b-bind等等命令。这里只实现了这三个命令，其余的命令你能够自由实现，原理同样。这个时候你就疑惑了咋解析啊，说解析你可能比较糊涂，我换个词。我把解析换成判断元素是否有这个属性，你是否是以为瞬间简单了很多。判断元素的属性只须要用hasAttribute方法是否是就能够了，当你知道他有这个属性的时候，给对应的属性添加一个事件监听是否是就能够了，好比input修改事件：

if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {
      node.addEventListener('input', (function(key) {
        var attrVal = node.getAttribute('v-model');
        _this._binding[attrVal]._directives.push(new Watcher(          'input',
          node,
          _this,
          attrVal,          'value'
        ))        return function() {
          _this.$data[attrVal] = nodes[key].value;
        }
      })(i));
    }

上文compile方法中提到的item也是在这里定义的对象，读到这里你是否是整个流程灌输起来了。有一种茅塞顿开的感受，可是你仔细琢磨就会有一种懂了，可是开口却说不出来，由于不少细节文章中没有提到，这些细节都比较简单，这个思路你明白了。这些细节只是将你脑海中的那张图描绘的更清楚的。

你可能会疑问如何监听的全部的属性，这里我能够告诉你用到的是递归方法。你若是不懂递归也能够看博主的这篇文章
https://blog.csdn.net/m0_37479946/article/details/79973315

代码链接：
https://pan.baidu.com/s/1lYGjz24KFau6MpY7fKYsJw
秘钥能够关注博主公众号吵吵日记回复myVue获取哦。

本文分享自微信公众号 - 点滴前端（DDIWEB）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。