我们对data数据中的每一项都进行了数据挟持，可是然而并没有什么卵用啊，我们并没有对相对应的虚拟dom进行数据改变，当然我们肯定是不能把我们的需要更改的虚拟dom操作写在这里，然而在Vue中对其Dom进行了特殊的处理，慢慢的向下看。
想要做数据响应要做一个做具体更新的类何以用来管理这些观察者的类
// 管理watcher class Dep { constructor() { // 存储 this.deps = []; } // 添加watcher appDep(dep){ this.deps.push(dep); } // 通知所有的watcher进行更新 notify(){ this.deps.forEach((dep) => { dep.update(); }) } } // 观察者 做具体更新 class Watcher { constructor(vm,key,cb){ // Vue实例 this.vm = vm; // 需要更新的key this.key = key; // 更新后执行的函数 this.cb = cb; // 将当前watcher实例指定到Dep静态属性target // 用来在类间进行通信 Dep.target = this; // 触发getter,添加依赖 this.vm[this.key]; Dep.target = null; } update(){ this.cb.call(this.vm,this.vm[this.key]); } }
Dep.target = this上面这段代码一定要注意，是向Dep类中添加了一个静态属性。
主要用来解析各种指令，比如v-modal，v-on:click等指令。然后将模版中的变量替换成数据，渲染view，将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据发生变动，收到通知，更新视图。
简单说下双向绑定，双向绑定原理，在编译的时候可以解析出v-model在做操作的时候，在使用v-model元素上添加了一个事件监听（input），把事件监听的回调函数作为事件监听的回调函数，如果input发生变化的时候把最新的值设置到vue的实例上，因为vue已经实现了数据的响应化，响应化的set函数会触发界面中所有依赖模块的更新，然后通知哪些model做依赖更新，所以界面中所有跟这个数据有管的东西就更新了。
class Compile { constructor(el,vm) { // 要遍历的宿主节点 this.$el = document.querySelector(el); this.$vm = vm; // 编译 if(this.$el){ // 转换宿主节点内容为片段Fragment元素 this.$fragment = this.node2Fragment(this.$el); // 执行编译过程 this.compile(this.$fragment); // 将编译完的HTML结果追加至宿主节点中 this.$el.appendChild(this.$fragment); } } // 将宿主元素中代码片段取出来，遍历，这样做比较高效 node2Fragment(el){ const frag = document.createDocumentFragment(); // 将宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中 let child; // 如果 el.firstChild 为undefined或null则会停止循环 while(child = el.firstChild){ frag.appendChild(child); } return frag; } compile(el){ // 宿主节点下的所有子元素 const childNodes = el.childNodes; Array.from(childNodes).forEach((node) => { if(this.isElement(node)){ // 如果是元素 console.log("编译元素"+node.nodeName) // 拿到元素上所有的执行,伪数组 const nodeAttrs = node.attributes; Array.from(nodeAttrs).forEach((attr) => { // 属性名 const attrName = attr.name; // 属性值 const exp = attr.value; // 如果是指令 if(this.isDirective(attrName)){ // q-text // 获取指令后面的内容 const dir = attrName.substring(2); // 执行更新 this[dir] && this[dir](node,this.$vm,exp); } // 如果是事件 if(this.isEvent(attrName)){ // 事件处理 let dir = attrName.substring(1); // @ this.eventHandler(node,this.$vm,exp,dir); } }) }else if(this.isInterpolation(node)){ // 如果是插值文本 this.compileText(node); console.log("编译文本"+node.textContent) } // 递归子元素，解决元素嵌套问题 if(node.childNodes && node.childNodes.length){ this.compile(node); } }) } // 是否为节点 isElement(node){ return node.nodeType === 1; } // 是否为插值文本 isInterpolation(node){ return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent); } // 是否为指令 isDirective(attr){ return attr.indexOf("q-") == 0; } // 是否为事件 isEvent(attr){ return attr.indexOf("@") == 0; } // v-text text(node,vm,exp){ this.update( node, vm, exp, "text"); } textUpdater(node,value){ node.textContent = value; } // 双向绑定 // v-model model(node,vm,exp){ // 指定input的value属性，模型到视图的绑定 this.update(node,vm,exp,"model"); // 试图对模型的响应 node.addEventListener('input',(e) => { vm[exp] = e.target.value; }) } modelUpdater(node,value){ node.value = value; } // v-html html(node,vm,exp){ this.update(node,vm,exp,"html") } htmlUpdater(node,value){ node.innerHTML = value; } // 更新插值文本 compileText(node){ let key = RegExp.$1; this.update( node, this.$vm, key, "text"); } // 事件处理器 eventHandler(node,vm,exp,dir){ let fn = vm.$options.methods && vm.$options.methods[exp]; if(dir && fn){ node.addEventListener(dir,fn.bind(vm)); } } // 更新函数 - 桥接 update(node,vm,exp,dir){ const updateFn = this[`${dir}Updater`]; // 初始化 updateFn && updateFn(node,vm[exp]); // 依赖收集 new Watcher(vm,exp,function(value){ updateFn && updateFn(node,value); }) } }
其实Compile整个编译过程，就是在做一个依赖收集的工作，然Vue知道每一个指令是做什么的。并做出对应的更新处理。