vue將數據綁定到組件的原理如下：
1、當實例化一個Vue構造函數，會執(zhí)行 Vue 的 init 方法，在 init 方法中主要執(zhí)行三部分內容，一是初始化環(huán)境變量，而是處理 Vue 組件數據，三是解析掛載組件。以上三部分內容構成了 Vue 的整個執(zhí)行過程。
2、Vue 實現了一個 觀察者-消費者(訂閱者) 模式來實現數據驅動視圖。通過設定對象屬性的 setter/getter 方法來監(jiān)聽數據的變化，而每個屬性的 setter 方法就是一個觀察者， 當屬性變化將會向訂閱者發(fā)送消息，從而驅動視圖更新。
3、Vue 的訂閱者 watcher 實現在 /src/watchr.js 。構建一個 watcher 最重要的是 expOrFn 和 cb 兩個參數，cb 是訂閱者收到消息后需要執(zhí)行的回調，一般來說這個回調都是視圖指令的更新方法，從而達到視圖的更新，但是這也不是必須的，訂閱回調也可以是一個和任何無關的純函數。一個訂閱者最重要的是要知道自己訂閱了什么，watcher 分析 expOrFn 的 getter 方法，從而間接獲得訂閱的對象屬性。
4、Vue 雙向數據綁定實現
數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是 Object.defineProperty() 定義的數據 set、get 函數中。Vue 中對于的函數為 defineReactive，在精簡版實現中，我只保留了一些基本特性：
function defineReactive(obj, key, value) { var dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { if (Dep.target) { dep.depend() } return value }, set: function reactiveSetter(newVal) { if (value === newVal) { return } else { value = newVal dep.notify() } } })}
在對數據進行讀取時，如果當前有 Watcher（對數據的觀察者吧，watcher 會負責將獲取的新數據發(fā)送給視圖），那將該 Watcher 綁定到當前的數據上（dep.depend()，dep 關聯當前數據和所有的 watcher 的依賴關系），是一個檢查并記錄依賴的過程。而在對數據進行賦值時，如果數據發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。