首先我们先解释一下下面用到的几个函数和对象
1、observe 观察者
2、Watcher 监听者
3、dep 监听者容器，就是一个数据的监听者（Wacher）都放在里面
4、notifiy 用来通知所有某数据的所有监听者，即通知数据的 dep的所有对象
5、updater 更新器包含多个更新器 根据不同的数据类型，执行不同的更新器。如 文本节点 指向TextUpdater 的逻辑
6、Combine 编译器 获取dom节点 将里面的模板数据 替换为真实数据。如
<div> {{name}} </div> 编译之后 变为 <div> 小明</div>

我也是初学者，这里看了别人的原码 加上了自己的理解
源码博客请看源码的博客地址
这些函数具体怎么用，怎么配合，请看下面：

一、数据代理

function MVVM(options) {this.$options = options || {};var data = this._data = this.$options.data;var _this = this;//当前实例vm// 数据代理// 实现 vm._data.xxx -> vm.xxx Object.keys(data).forEach(function(key) {_this._proxyData(key);});observe(data, this);this.$compile = new Compile(options.el || document.body, this);//定义编译器且初始化}MVVM.prototype = {
//数据代理函数实现
_proxyData: function(key) {var _this = this;if (typeof key == 'object' && !(key instanceof Array)){//这里只实现了对对象的监听，没有实现数组的this._proxyData(key);}Object.defineProperty(_this, key, {configurable: false,enumerable: true,get: function proxyGetter() {return _this._data[key];},set: function proxySetter(newVal) {_this._data[key] = newVal;}});
},
};

这里使用了 Object.defineProperty(对象,属性,配置)来实现数据代理，为什么要数据代理呢 ？
1、不想暴露内部逻辑
2、方便访问 如 vm._data.xxx -> vm.xxx
而且这里采用递归的方式 为对象以及对象的属性都添加代理

二、观察者

为数据添加观察者,即上面代码的observe(data, this);

function observe(data){if (typeof data != 'object') {return ;}return new Observe(data);
}function Observe(data){this.data = data;this.walk(data);//遍历 data
}Observe.prototype = {walk: function(data){let _this  = this;for (key in data) {if (data.hasOwnProperty(key)){//如果这个属性自身存在let dep = new Dep();let value = data[key];if (typeof value == 'object'){observe(value);}_this.defineReactive(data,key,data[key]);}}},defineReactive: function(data,key,value){//为这个属性设置get方法，同时生成一个dep数组订阅器，let dep = new Dep();//在data的属性key内形成闭包，因此每个key都对应一个唯一的订阅器Object.defineProperty(data,key,{enumerable: true,//可枚举configurable: false,//不能再defineget: function(){//console.log('你访问了' + key);//测试代码，忽略//如果是是初始化一个Watcher时引起的，则添加进订阅器if (Dep.target){dep.addSub(Dep.target);}//console.log(dep);//测试代码，忽略return value;},set: function(newValue){//console.log('你设置了' + key);//测试代码，忽略if (newValue == value) return;value = newValue;observe(newValue);//监听新设置的值//console.log(dep);//测试代码，忽略dep.notify();//通知所有的订阅者}})}
}function Dep(){this.subs = [];
}Dep.prototype = {addSub: function(sub){this.subs.push(sub);},notify: function(){this.subs.forEach(function(sub) {sub.update();//每个监听器都有 update 函数})}
}

这段代码为每一个数据都添加get/set函数，当数据发生改变时，做出一些响应。为什么要做出响应啊？为了当该数据改变的时候去通知关注该数据的那些节点让他更新。但是这时候dep数组里面没有对象,我怎么知道谁使用它了呢？ 其实dep里的对象是编译的时候添加进去的。。

三、编译模板

编译就是为了把dom中绑定的变量 编译为真实的数据，并且添加对该数据的监听，这里说说其中的一些要点。
1、let fragment = document.createDocumentFragment();
fragment 的appendChild(child); 会把child剪切到内存中，对其进行操作，当然原来的child所指向的节点就会从dom树移除。
那么为什么要这么做呢？？
我们都知道操作dom树是相当耗时的，因为我们对一个节点修改时，浏览器需要计算该元素相对于全局的位置、属性、样式等，而且当我们修改时会出现回流或者重绘，这是相当影响性能的。这里我们选择将要操作的dom 移动到内存中操作，就不会影响其他的dom元素，我们修改完成之后，在将该节点插入到dom树中，只计算一次，性能更好
2、我们是如何将节点添加到数据的监听者里的？
这里我们以所编译的节点为文本节点为例,如{{name}} ，看看是如何操作的。
(1)、首先用正则表达式/\{\{(.*)\}\}/将变量取出，即name，
(2)、调用compileUtil 的text函数，text函数中又调用了bind方法
将节点绑定到dep数组，通过代码中通过new Watcher

new Watcher(vm,exp,function(value){  // wacher 把自己挂载到 vm的 订阅者里updaterFn && updaterFn(node,value)//更新函数
});

我们看watcher，这个操作的意思就是把该节点弄成一个监听者对象，如何添加到dep数组呢?因为我们之前已经对name添加了get方法，并且那个get方法里
if (Dep.target){
dep.addSub(Dep.target);
}
我们在watcher的get函数里操作，通过Dep.target将自己传送到 name的get方法中，如下操作：因为有name有get方法，所以 this.vm[name]就会被调用

	get: function() { Dep.target = this;  // 缓存自己var value = this.vm[this.exp];  // 强制访问自己,执行defineProperty里的get函数         Dep.target = null;  // 释放自己return value;}

//Watcher
function Watcher(vm, exp, cb) {this.vm = vm;this.cb = cb;//更新函数this.exp = exp;this.value = this.get();//将自己添加进订阅器
};Watcher.prototype = {update: function(){this.run();},run: function(){const value = this.vm[this.exp];//console.log('me:'+value);//测试代码，忽略if (value != this.value){this.value = value;this.cb.call(this.vm,value);}},get: function() { Dep.target = this;  // 缓存自己var value = this.vm[this.exp];  // 强制访问自己,执行defineProperty里的get函数         Dep.target = null;  // 释放自己return value;}
}

function Compile(el,vm){this.$vm = vm;//vm为当前实例this.$el = document.querySelector(el);//获得要解析的根元素if (this.$el){this.$fragment = this.nodeToFragment(this.$el);//将节点添加到文档碎片this.init();this.$el.appendChild(this.$fragment);}	
}
Compile.prototype = {nodeToFragment: function(el){let fragment = document.createDocumentFragment();let child;while (child = el.firstChild){fragment.appendChild(child);//append相当于剪切的功能}return fragment;},init: function(){//初始编译this.compileElement(this.$fragment);},compileElement: function(node){let childNodes = node.childNodes;//获取子节点const _this = this;let reg = /\{\{(.*)\}\}/;[].slice.call(childNodes).forEach(function(node){	if (_this.isElementNode(node)){//如果为元素节点_this.compile(node);} else if (_this.isTextNode(node) && reg.test(node.textContent)){//如果为文本节点，并且包含data属性(如{{name}}),则进行相应操作_this.compileText(node,reg.exec(node.textContent)[1]);}	if (node.childNodes && node.childNodes.length){//如果节点内还有子节点，则递归继续解析节点_this.compileElement(node);	}})},compileText: function(node,exp){compileUtil.text(node,this.$vm,exp);},isElementNode: function(node){return (node.nodeType == 1);},isTextNode: function(node){return node.nodeType == 3;},isDirective: function(attr){return (attr.indexOf('v-') == 0);},isEventDirective: function(attr){return attr.indexOf('on') == 0;},isLinkDirective: function(attr){return attr.indexOf('bind') == 0;},//编译节点内的属性compile: function(node) {console.log('编译节点的属性')var nodeAttrs = node.attributes,//获取当前节点的属性,v-on:,v-bind:,v-model,class等属性_this = this;[].slice.call(nodeAttrs).forEach(function(attr) {var attrName = attr.name;if (_this.isDirective(attrName)) {//判断是否为vue指令var exp = attr.value;var dir = attrName.substring(2);// 事件指令: v-on:if (_this.isEventDirective(dir)) {//node:当前节点， _this.$vm:当前实例, exp:指令属性值(表达式或函数), dir:指令类型(on)compileUtil.eventHandler(node, _this.$vm, exp, dir);} if (_this.isLinkDirective(dir)){let attr = dir.split(':')[1];compileUtil[attr] && compileUtil[attr](node, _this.$vm, exp);}else {//其它指令: v-bind:,v-modelcompileUtil[dir] && compileUtil[dir](node, _this.$vm, exp);}}});},
};
let updater = {textUpdater: function(node,value){node.textContent = typeof value == 'undefined' ? '' : value;},modelUpdater: function(node, value) {node.value = typeof value == 'undefined' ? '' : value;},classUpdater: function(node, value) {var className = node.className;node.className = className + value;},
}
let compileUtil = {eventHandler: function(node,vm,exp,dir){let eventType = dir.split(':')[1];let fn = vm.$options.methods && vm.$options.methods[exp];if (eventType && fn){node.addEventListener(eventType,fn.bind(vm),false);}},class: function(node, vm, exp) {this.bind(node, vm, exp, 'class');},model: function(node,vm,exp){this.bind(node,vm,exp,'model');let _this = this;let value = node.value;node.addEventListener('input',function(e){let newValue = e.target.value;if (value == newValue) return;vm[exp] = newValue;//设置exp属性值，触发视图的更新},false);},text: function(node,vm,exp){this.bind(node,vm,exp,'text');},_getVMVal: function(vm,exp) {let arr = exp.split('.');let value = vm;arr.forEach(function(item){//a.b  -->arr = [a,b]-->value = ->> value = value[b]-->a[b]value = value[item];//经过了数据代理，所以data里的数据直接绑定到了实例上console.log('设置节点值',item,value)})//console.log(value);return value;},bind: function(node,vm,exp,dir){//初始化相关let updaterFn = updater[dir + 'Updater'];//获取更新器updaterFn && updaterFn(node,this._getVMVal(vm,exp));//初始化首先去 vm实例拿值new Watcher(vm,exp,function(value){  // wacher 把自己挂载到 vm的 订阅者里updaterFn && updaterFn(node,value)//更新函数});//console.log('实例化了一个Watcher');//测试代码，忽略}
};

至此,当我们修改某个数据的值的时候，就会自动调用该数据的监听者的updatefn函数，执行更新逻辑。