之前我們講到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
預祝小夥伴在代碼界更上一層樓，更對技術文章敬請關注源碼時代。
閱讀更多 源碼時代 的文章
