到这，我们做到了获取文本中真实的dom节点，然后分析节点的类型，并能处理节点中相应的变量如上面代码中的{{text}}，最后渲染到页面中。接着我们需要和双向绑定联系起来，实现{{text}}响应式的数据绑定。
五、实现简单observe
简单的observe定义如下：
需要监控data的属性值，这个对象的某个值赋值，就会触发setter，这样就能监听到数据变化。然后注意vm.data[name]属性将改为vm[name]
完整代码如下：
<!DOCTYPE html> <head></head> <body> <div> <input type="text" v-model="text"> {{text}} </div> <script type="text/javascript"> function Compile(node, vm) { if(node) { this.$frag = this.nodeToFragment(node, vm); return this.$frag; } } Compile.prototype = { nodeToFragment: function(node, vm) { var self = this; var frag = document.createDocumentFragment(); var child; while(child = node.firstChild) { self.compileElement(child, vm); frag.append(child); // 将所有子节点添加到fragment中 } return frag; }, compileElement: function(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'); } }; } //节点类型为text if(node.nodeType === 3) { if(reg.test(node.nodeValue)) { var name = RegExp.$1; // 获取匹配到的字符串 name = name.trim(); node.nodeValue = vm[name]; // 将data的值赋给该node // new Watcher(vm, node, name); } } }, } function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { get: function() { return val; }, set: function (newVal) { if(newVal === val) return; val = newVal; console.log(val); } }) } function observe(obj, vm) { Object.keys(obj).forEach(function(key) { defineReactive(vm, key, obj[key]); }) } function Vue(options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom =new Compile(document.getElementById(id),this); // 编译完成后，将dom返回到app中 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); </script> </body> </html>
结果：
到这，虽然set方法触发了，但是文本节点{{text}}的内容没有变化，要让绑定的文本节点同步变化，我们需要引入订阅发布模式。
六、订阅发布模式
订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
首先我们要一个收集订阅者的容器，定义一个Dep作为主题对象
然后定义订阅者Watcher
添加订阅者Watcher到主题对象Dep，发布者发出通知放到属性监听里面
最后需要订阅的地方
至此，比较简单地实现了我们第三步用dom操作实现的双向绑定效果，代码：