簡要理解vue的mvvm模式中的雙向資料繫結
mvvm（Model-View-ViewModel）模式：
由檢視(View)、檢視模型(ViewModel)、模型(Model)三部分組成，結構如下圖。
通過這三部分實現UI邏輯、呈現邏輯和狀態控制、資料與業務邏輯的分離。
使用MVVM模式有幾大好處：
1. 低耦合。View可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
2. 可重用性。可以把一些檢視的邏輯放在ViewModel裡面，讓很多View重用這段檢視邏輯。
3. 獨立開發。開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注於介面(View)的設計。
4. 可測試性。可以針對ViewModel來對介面(View)進行測試
vue中支援mvvm的核心就是雙向資料繫結機制。
vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現的，那麼vue是如果進行資料劫持的，我們可以先來看一下通過控制檯輸出一個定義在vue初始化資料上的物件是個什麼東西。
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
}); 
我們可以看到屬性a有兩個相對應的get和set方法，為什麼會多出這兩個方法呢？因為vue是通過Object.defineProperty()來實現資料劫持的。
雙向資料繫結的模式是view改變是更新data，data改變的時候更新view。view改變後更新data可以通過事件監聽來實現，這不是問題，問題是data改變後如何更新到view。
參考vue的做法就是通過set,get來實現。
下面我們來看兩個data改變後更新view的DOM:
1.改變prop這個屬性的值後，通過set立即更新到view
<!DOCTYPE html>
<html> var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一個書名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue權威指南'; // 你取了一個書名叫做vue權威指南
console.log(Book.name); // 《vue權威指南》我們通過Object.defineProperty( )設定了物件Book的name屬性，對其get和set進行重寫操作，顧名思義，get就是在讀取name屬性這個值觸發的函式，set就是在設定name屬性這個值觸發的函式，所以當執行 Book.name = ‘vue權威指南’ 這個語句時，控制檯會打印出 “你取了一個書名叫做vue權威指南”，緊接著，當讀取這個屬性時，就會輸出 “《vue權威指南》”，因為我們在get函式裡面對該值做了加工了。如果這個時候我們執行下下面的語句，控制檯會輸出什麼？
以上是對vue中的mvvm和雙向資料繫結的簡要理解，內容不深，適合入門，不喜勿噴！喜歡可以點個贊或者關注，嘻嘻！