双向数据绑定和单向数据绑定解释

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

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