共计 5953 个字符，预计需要花费 15 分钟才能阅读完成。
用了两年左右的 vue，虽然看过 vue 的源码，推荐黄轶大佬的 vue 源码分析，相当到位。从头梳理了 vue 的实现过程。周末又看了一个公开课的 vue 源码分析，想着自己是不是也可以写一个来实现，说干就干，开始 coding！目前最新版本的 vue 内部依然使用了 Object.defineProperty() 来实现对数据属性的劫持，进而达到监听数据变动的效果。
需要数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
需要指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
mvvm 入口函数，整合以上三者，实现数据响应。
相信看过 vue 官网的小伙伴们一定看过下面这张图吧，解释了 vue 是如何实现响应式的数据绑定。
Observer 类的实现
主要利用了 Object.defineProperty() 这个方法，对数据进行遍历，给每一个对象都添加了 getter() 和 setter(). 主要代码如下：
class Observer{
constructor(data){
this.data=data;
this.traverse(data);
}
traverse(data) {
var self = this;
Object.keys(data).forEach(function(key) {
self.convert(key, data[key]);
});
}
convert(key,val){
this.defineReactive(this.data, key, val);
}
defineReactive(data, key, val) {
var dep = new Dep();
var childObj = observe(val);
Object.defineProperty(data, key, {
enuselfrable: true, // 可枚举
configurable: false, // 不能再 define
get(){
if (Dep.target) {
dep.depend();
}
return val;
},
set(newVal) {
if (newVal === val) {
return;
}
val = newVal;
// 新的值是 object 的话，进行监听
childObj = observe(newVal);
// 通知订阅者
dep.notify();
}
});
}
}
function observe(value, vm) {
if (!value || typeof value !== ‘object’) {
return;
}
return new Observer(value);
}
经过以上的方法，我们就劫持到了数据属性。
Compile 类的实现
主要用来解析各种指令，比如 v -modal，v-on:click 等指令。然后将模版中的变量替换成数据，渲染 view，将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据发生变动，收到通知，更新视图。
class Compile{
constructor(el,vm){
this.$vm = vm;
this.$el = this.isElementNode(el) ? el : document.querySelector(el);
if (this.$el) {
this.$fragment = this.node2Fragment(this.$el);
this.init();
this.$el.appendChild(this.$fragment);
}
}
node2Fragment(el){
var fragment = document.createDocumentFragment(),
child;
// 将原生节点拷贝到 fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
}
init(){
this.compileElement(this.$fragment);
}
compileElement(el){
var childNodes = el.childNodes,
self = this;
[].slice.call(childNodes).forEach(function(node) {
var text = node.textContent;
var reg = /\{\{(.*)\}\}/;
if (self.isElementNode(node)) {
self.compile(node);
} else if (self.isTextNode(node) && reg.test(text)) {
self.compileText(node, RegExp.$1);
}
if (node.childNodes && node.childNodes.length) {
self.compileElement(node);
}
});
}
compile(node){
var nodeAttrs = node.attributes,
self = this;
[].slice.call(nodeAttrs).forEach(function(attr) {
var attrName = attr.name;
if (self.isDirective(attrName)) {
var exp = attr.value;
var dir = attrName.substring(2);
// 事件指令
if (self.isEventDirective(dir)) {
compileUtil.eventHandler(node, self.$vm, exp, dir);
// 普通指令
} else {
compileUtil[dir] && compileUtil[dir](node, self.$vm, exp);
}
node.removeAttribute(attrName);
}
});
}
compileText(node, exp){
compileUtil.text(node, this.$vm, exp);
}
isDirective(attr){
return attr.indexOf(‘v-‘) == 0;
}
isEventDirective(dir){
return dir.indexOf(‘on’) === 0;
}
isElementNode(node){
return node.nodeType == 1;
}
isTextNode(node){
return node.nodeType == 3;
}
}
// 指令处理集合
var compileUtil = {
text: function(node, vm, exp) {
this.bind(node, vm, exp, ‘text’);
},
html: function(node, vm, exp) {
this.bind(node, vm, exp, ‘html’);
},
model: function(node, vm, exp) {
this.bind(node, vm, exp, ‘model’);
var self = this,
val = this._getVMVal(vm, exp);
node.addEventListener(‘input’, function(e) {
var newValue = e.target.value;
if (val === newValue) {
return;
}
self._setVMVal(vm, exp, newValue);
val = newValue;
});
},
class: function(node, vm, exp) {
this.bind(node, vm, exp, ‘class’);
},
bind: function(node, vm, exp, dir) {
var updaterFn = updater[dir + ‘Updater’];
updaterFn && updaterFn(node, this._getVMVal(vm, exp));
new Watcher(vm, exp, function(value, oldValue) {
updaterFn && updaterFn(node, value, oldValue);
});
},
// 事件处理
eventHandler: function(node, vm, exp, dir) {
var eventType = dir.split(‘:’)[1],
fn = vm.$options.methods && vm.$options.methods[exp];
if (eventType && fn) {
node.addEventListener(eventType, fn.bind(vm), false);
}
},
_getVMVal: function(vm, exp) {
var val = vm;
exp = exp.split(‘.’);
exp.forEach(function(k) {
val = val[k];
});
return val;
},
_setVMVal: function(vm, exp, value) {
var val = vm;
exp = exp.split(‘.’);
exp.forEach(function(k, i) {
// 非最后一个 key，更新 val 的值
if (i < exp.length – 1) {
val = val[k];
} else {
val[k] = value;
}
});
}
};
var updater = {
textUpdater: function(node, value) {
node.textContent = typeof value == ‘undefined’ ? ” : value;
},
htmlUpdater: function(node, value) {
node.innerHTML = typeof value == ‘undefined’ ? ” : value;
},
classUpdater: function(node, value, oldValue) {
var className = node.className;
className = className.replace(oldValue, ”).replace(/\s$/, ”);
var space = className && String(value) ? ‘ ‘ : ”;
node.className = className + space + value;
},
modelUpdater: function(node, value, oldValue) {
node.value = typeof value == ‘undefined’ ? ” : value;
}
};
Watcher 类的实现
作为链接的桥梁，链接了 compile 和 observer。添加订阅者，当检测到属性发生变化，接收到 dep.notify() 的通知的时候，就执行自身的 update() 方法
class Watcher{
constructor(vm, expOrFn, cb){
this.cb = cb;
this.vm = vm;
this.expOrFn = expOrFn;
this.depIds = {};
if (typeof expOrFn === ‘function’) {
this.getter = expOrFn;
} else {
this.getter = this.parseGetter(expOrFn);
}
this.value = this.get();
}
update(){
this.run();
}
run(){
var value = this.get();
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
}
addDep(dep){
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this);
this.depIds[dep.id] = dep;
}
}
get() {
Dep.target = this;
var value = this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
}
parseGetter(exp){
if (/[^\w.$]/.test(exp)) return;
var exps = exp.split(‘.’);
return function(obj) {
for (var i = 0, len = exps.length; i < len; i++) {
if (!obj) return;
obj = obj[exps[i]];
}
return obj;
}
}
}
mvvm 实现
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化，触发视图更新；视图交互变化 (input) 触发数据 model 变更的双向绑定效果。
class Mvvm{
constructor(options){
this.$options=options;
this.data=this._data = this.$options.data;
console.log(this.$options)
var self = this;
// 数据代理, 实现响应，vue3 会改写，使用 proxy 代理方式
Object.keys(this.data).forEach(function(key) {
self.defineReactive(key);
});
this.initComputed();
new Observer(this.data, this);
this.$compile = new Compile(this.$options.el || document.body, this)
}
defineReactive(key){
var self=this;
Object.defineProperty(this,key,{
configurable:false,
enuselfrable:true,
get(){
return self.data[key];
},
set(newValue){
self.data[key]=newValue;
}
})
}
}
基本上就大功告成了，大部分代码都是参考了 vue 源码的实现，学着读源码吧，体会 vue 设计的优雅。顺便推荐一个 github 读源码的 chrome 插件：octotree. 本文完整代码请查看 github
本文同步发表于个人博客
顺便说一句，最近开始找工作了，坐标北京，如果各位大佬有机会，望推荐下哈，在此先行谢过！
