本文能幫你做什么？

1、了解vue的雙向數據綁定原理以及核心代碼模塊
2、緩解好奇心的同時了解如何實現雙向綁定

為了便于說明原理與實現，本文相關代碼主要摘自vue源碼, 并進行了簡化改造，相對較簡陋，并未考慮到數組的處理、數據的循環依賴等，也難免存在一些問題，歡迎大家指正。不過這些并不會影響大家的閱讀和理解，相信看完本文后對大家

在閱讀vue源碼的時候會更有幫助

本文所有相關代碼均在github上面可找到 github.com/DMQ/mvvm

相信大家對mvvm雙向綁定應該都不陌生了，一言不合上代碼，下面先看一個本文最終實現的效果吧，和vue一樣的語法，如果還不了解雙向綁定，猛戳Google

<div id="mvvm-app">  <input type="text" v-model="word">  <p>{{word}}</p>  <button v-on:click="sayHi">change model</button></div><script src="./js/observer.js"></script><script src="./js/watcher.js"></script><script src="./js/compile.js"></script><script src="./js/mvvm.js"></script><script>var vm = new MVVM({  el: '#mvvm-app',    data: {      word: 'Hello World!'    },    methods: {      sayHi: function() {        this.word = 'Hi, everybody!';      }    }  });</script>

幾種實現雙向綁定的做法

目前幾種主流的mvc(vm)框架都實現了單向數據綁定，而我所理解的雙向數據綁定無非就是在單向綁定的基礎上給可輸入元素（input、textare等）添加了change(input)事件，來動態修改model和 view，并沒有多高深。所以無需太過介懷是實現的單向或雙向綁定。

實現數據綁定的做法有大致如下幾種：

發布者-訂閱者模式: 一般通過sub, pub的方式實現數據和視圖的綁定監聽，更新數據方式通常做法是 vm.set('property', value)，這里有篇文章講的比較詳細，有興趣可點這里

這種方式現在畢竟太low了，我們更希望通過 vm.property = value這種方式更新數據，同時自動更新視圖，于是有了下面兩種方式

臟值檢查: angular.js 是通過臟值檢測的方式比對數據是否有變更，來決定是否更新視圖，最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，當然Google不會這么low，angular只有在指定的事件觸發時進入臟值檢測，大致如下：

數據劫持: vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。