双向数据绑定与单向数据绑定

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

一样也实现了双向数据绑定，因此它并非什么黑魔法！