之前我们讲到js实现Vue双向绑定命令，需要将任务分解为三步：
1、输入框以及文本节点与 data 中的数据绑定
2、输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
3、data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化
上一篇内容中，我们已经完成第一步，成功将data中的数据绑定到输入框与文本节点中，在这一篇，我们将会实现第二、第三步。在这里我们将会使用到defineProperty与订阅/发布模式。
2.2响应式的数据绑定
我们先来看一下任务二的实现思路：当我们在输入框输入数据的时候，首先会触发input事件（或者keyup，change事件），在相应的事件处理程序中，我们获取输入框的Value并复制给vm实例的text属性。我们会利用defineProperty将data 中的 text 设置为 vm 的访问器属性，因此给 vm.text 赋值，就会触发 set 方法。在 set 方法中主要做两件事，第一是更新属性的值，第二留到任务三再说。
成好了，vm实例中的text属性值户与输入框内容同步变化。
text属性变化了，set方法触发了,但是文本节点内容还没有发生变化。如何让同样绑定到text的文本节点也同步变化？这里我们将会使用到我们提到的订阅/发布模式（subscribe&publish）/səb'skraɪb/ /'pʌblɪʃ/，接下来我们将会简单的介绍订阅/发布模式。
-订阅/发布模式（subscribe&publish）
订阅发布模式（又称之为观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时，就会通知所有的观察者对象。
发布者发出通知=> 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作
代码地址:
https://github.com/Melody-YW/JavaScript/blob/master/Js%E5%AE%9E%E7%8E%B0vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/subscribe%26publish.html
之前提到的，当set方法触发后做的第二件事就是作为发布者发出通知“我是属性text，我变了”。文本节点作为订阅者，在收到消息后执行相应的更新操作。
2.3双向绑定的实现
回顾一下，每当new Vue时，我们主要做了两件事：第一个是监听数据：observe(data)，第二个是编译HTML：nodeToFragment(id)。
在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。
在编译HTML过程中，会为每个与数据绑定的相关节点生成一个订阅者watcher，watcher会将自己添加到相应的属性dep中。
我们已经实现：修改输入框内容=> 在事件会掉函数中修改属性值 => 触发属性的set方法
接下来我们要实现的是：发出通知dep.notify( ) => 触发订阅者的update方法 => 更新视图
这里的关键逻辑是：如何将watcher添加到关联属性的dep中？
你是否已经有好的思路去实现呢？如果没有，fllow me！
在编译HTML国政中，为每个与data关联的节点生成一个Watcher。Watcher函数中应该发生什么呢？
先将自己赋给一个全局变量Dep.target;
其次，执行了update方法，进而执行了get方法，get方法读取了vm的访问器属性，从而触发了访问器属性的get方法，get方法中将该watcher添加到了对应访问器属性的dep中；
再次，获取属性的值，然后更新视图。
最后，将Dep.target设为空，因为它是全局变量，也是watcher与dep关联的唯一桥梁，任何时刻都必须保证Dep.target只有一个值。
到这里，hello world双向绑定就基本实现了，文本内容户随着输入框内容同步变化，并在控制器中修改vm.text的值。
你的代码实现功能了吗？
https://github.com/Melody-YW/JavaScript/blob/master/Js%E5%AE%9E%E7%8E%B0vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/mvvm.html
预祝小伙伴在代码界更上一层楼，更对技术文章敬请关注源码时代。
閱讀更多 源碼時代 的文章
關鍵字: 双向 编程语言 JavaScript
