雙向數據綁定和單向數據綁定解釋：
a. 單向數據綁定
指的是我們先把模板寫好，然后把模板和數據（數據可能來自后台）整合到一起形成HTML代碼，然后把這段HTML代碼插入到文檔流里面。
單向數據綁定缺點：HTML代碼一旦生成完以后，就沒有辦法再變了，如果有新的數據來了，那就必須把之前的HTML代碼去掉，再重新把新的數據和模板一起整合后插入到文檔流中。 簡單的來說就是DOM操作直接改變
b. 數據數據雙向
數據模型（Module）和視圖（View）之間的雙向綁定。
用戶在視圖上的修改會自動同步到數據模型中去，同樣的，如果數據模型中的值發生了變化，也會立刻同步到視圖中去。雙向數據綁定的優點是無需進行和單向數據綁定的那CRUD（Create，Retrieve，Update，Delete）操作雙向數據綁定最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入后，不用任何操作，我們就已經拿到了用戶的數據存放到數據模型中了。
在react中是單向數據綁定，而在vue和augular中的特色是雙向數據綁定。為什么會選擇兩種不同的機制呢？我猜測是兩種不同的機制有不同的適應場景，查了一些資料后，總結一下。
一、各自優勢
雙向數據綁定給人的最大的優越感就是方便。當數據data發生變化時，頁面自動發生更新。但是有一個缺點也是因為自動更新而導致的，因為這樣你就不知道data什么時候變了，也不知道是誰變了，變化后也不會通知你，當然你可以watch來監聽data的變化，但是這變復雜了，還不如單向數據綁定。
所以說按照方神的說法：Vuex推薦單向綁定就是為了[控制欲]！，雖然單向綁定犧牲了一部分便捷性，換來的是更大的[控制力]
除此之外單向數據綁定對於復雜應用來說是實施統一的狀態管理，方便跟蹤。
更多討論見知乎：https://www.zhihu.com/question/49964363
二、單向數據與雙向數據關系
單向數據綁定的實現思路：
- 所有數據只有一份
- 一旦數據變化，就去更新頁面(data-頁面)，但是沒有(頁面-data)
- 如果用戶在頁面上做了變動，那么就手動收集起來(雙向是自動)，合並到原有的數據中。
其實單向綁定也有雙向綁定的意味，不過頁面變動后數據的變化不會自動更新。方神解析了這個魔法：雙向綁定 = 單向綁定 + UI事件監聽。請看下面的代碼示例
vue數據雙向綁定
<body> <div id="app"> <input type="text" v-model="meg"> <p>{{data}}</p> </div> <script> var app = new Vue({ el:'#app', data :{ meg:'' } }) </script> </body>
當你在頁面的input框中輸入值時，下面一行同步顯示內容，如果我們不要v-model指令能實現這個效果嗎? 只需要改為:
//首先設置value屬性為meg，然后監聽輸入事件 <input type="text" :value="meg" @input="meg=$event.target.value">
同樣也實現了雙向數據綁定，所以它並不是什么黑魔法！