雙向數據綁定與單向數據綁定

時間 2019-11-16

標籤雙向數據綁定單向简体版

原文原文鏈接

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

1、各自優點react

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

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

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

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

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

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

全部數據只有一份
一旦數據變化，就去更新頁面(data-頁面)，可是沒有(頁面-data)
若是用戶在頁面上作了變更，那麼就手動收集起來(雙向是自動)，合併到原有的數據中。

其實單向綁定也有雙向綁定的意味，不過頁面變更後數據的變化不會自動更新。方神解析了這個魔法：雙向綁定 = 單向綁定 + UI事件監聽。請看下面的代碼示例ip

vue數據單向綁定get

<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">

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。