我们再来看看任务的实现思路，当我们在输入框输入数据的时候，首先触发input事件（或者keyup,change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。我们会利用defineProperty将data中text设置为vm的访问器属性，因此给vm.text赋值，就会触发set方法。在set方法可主要做两件事，第一，更新属性的值，第二后面再说。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <div> <input type="text" v-model="text"> {{ text }} </div> <script> function compile(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 } } } function nodeToFragment(node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.appendChild(child); // 将子节点劫持到文档片段中 } return flag; } function Vue(options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 编译完成后，将dom返回到app中。 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); function defineReactive(obj, key, val) { // 响应式的数据绑定 Object.defineProperty(obj, key, { get: function () { return val; }, set: function (newVal) { if (newVal === val) { return; } else { val = newVal; console.log(val); // 方便看效果 } } }); } function observe (obj, vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm, key, obj[key]); }); } </script> </body> </html>
7. 订阅/发布模式(subscribe & publish)
text属性变化了，set方法触发了，但是文本节点的内容没有变化。如何才能让同样绑定到text的文本节点也同步变化呢？这里有一个知识点：订阅发布模式，订阅发布模式又称为观察者模式，定义一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有的观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作
// 一个发布者 publisher，功能就是负责发布消息 - publish var pub = { publish: function () { dep.notify(); } } // 多个订阅者 subscribers， 在发布者发布消息之后执行函数 var sub1 = { update: function () { console.log(1); } } var sub2 = { update: function () { console.log(2); } } var sub3 = { update: function () { console.log(3); } } // 一个主题对象 function Dep() { this.subs = [sub1, sub2, sub3]; } Dep.prototype.notify = function () { this.subs.forEach(function (sub) { sub.update(); }); } // 发布者发布消息， 主题对象执行notify方法，进而触发订阅者执行Update方法 var dep = new Dep(); pub.publish();
不难看出，这里的思路还是很简单的： 发布者负责发布消息、 订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。
所以，当set方法触发后做的第二件事情就是作为发布者发出通知： “我是属性text，我变了”。 文本节点作为订阅者，在接收到消息之后执行相应的更新动作。
8.双向绑定的实现
回顾一下，每当new一个vue,主要做了两件事情 ，第一监听数据:observe(data),第二是编译HTML， nodeToFragment(id)
在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。
在编译HTML的过程中，会为每一个数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。
我们已经实现了：修改输入框内容 => 在事件回调函数中修改属性值 => 触 发属性的set方法。
接下来我们要实现的是：发出通知dep.notify() => 触发订阅者update方法 => 更新视图。
这里的关键逻辑是：如何将watch添加到关联属性的dep中。