双向数据绑定与单向数据绑定的各自优势和关系

更新日期: 2017-11-29阅读: 5.6k标签: 数据分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在react中是单向数据绑定，而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢？我猜测是两种不同的机制有不同的适应场景，查了一些资料后，总结一下。

一、各自优势

双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时，页面自动发生更新。但是有一个缺点也是因为自动更新而导致的，因为这样你就不知道data什么时候变了，也不知道是谁变了，变化后也不会通知你，当然你可以watch来监听data的变化，但是这变复杂了，还不如单向数据绑定。

所以说按照方神的说法：Vuex推荐单向绑定就是为了[控制欲]！，虽然单向绑定牺牲了一部分便捷性，换来的是更大的[控制力]

除此之外单向数据绑定对于复杂应用来说是实施统一的状态管理，方便跟踪。

二、单向数据与双向数据关系

单向数据绑定的实现思路：

所有数据只有一份
一旦数据变化，就去更新页面(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">

同样也实现了双向数据绑定，所以它并不是什么黑魔法！

来源：https://www.cnblogs.com/luoqian/p/6440146.html

链接: https://fly63.com/article/detial/199