雙向數據綁定和單向數據綁定解釋

時間 2019-11-29 標籤雙向數據綁定單向數據綁定解釋

雙向數據綁定和單向數據綁定解釋：前端

a. 單向數據綁定
　　指的是咱們先把模板寫好，而後把模板和數據（數據可能來自後臺）整合到一塊兒造成HTML代碼，而後把這段HTML代碼插入到文檔流裏面。
單向數據綁定缺點：HTML代碼一旦生成完之後，就沒有辦法再變了，若是有新的數據來了，那就必須把以前的HTML代碼去掉，再從新把新的數據和模板一塊兒整合後插入到文檔流中。簡單的來講就是DOM操做直接改變vue

b. 數據數據雙向
　　數據模型（Module）和視圖（View）之間的雙向綁定。
用戶在視圖上的修改會自動同步到數據模型中去，一樣的，若是數據模型中的值發生了變化，也會馬上同步到視圖中去。雙向數據綁定的優勢是無需進行和單向數據綁定的那CRUD（Create，Retrieve，Update，Delete）操做雙向數據綁定最常常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操做，咱們就已經拿到了用戶的數據存放到數據模型中了。react

在react中是單向數據綁定，而在vue和augular中的特點是雙向數據綁定。爲何會選擇兩種不一樣的機制呢？我猜想是兩種不一樣的機制有不一樣的適應場景，查了一些資料後，總結一下。app

1、各自優點spa

雙向數據綁定給人的最大的優越感就是方便。當數據data發生變化時，頁面自動發生更新。可是有一個缺點也是由於自動更新而致使的，由於這樣你就不知道data何時變了，也不知道是誰變了，變化後也不會通知你，固然你能夠watch來監聽data的變化，可是這變複雜了，還不如單向數據綁定。雙向綁定

因此說按照方神的說法：Vuex推薦單向綁定就是爲了[控制慾]！，雖然單向綁定犧牲了一部分便捷性，換來的是更大的[控制力]code

除此以外單向數據綁定對於複雜應用來講是實施統一的狀態管理，方便跟蹤。blog

更多討論見知乎：https://www.zhihu.com/question/49964363事件

2、單向數據與雙向數據關係ip

單向數據綁定的實現思路：

全部數據只有一份
一旦數據變化，就去更新頁面(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">

一樣也實現了雙向數據綁定，因此它並非什麼黑魔法！