双向数据绑定和单向数据绑定解释
Posted hanguidong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了双向数据绑定和单向数据绑定解释相关的知识，希望对你有一定的参考价值。
双向数据绑定和单向数据绑定解释：
a. 单向数据绑定
指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成html代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变
b. 数据数据双向
数据模型（Module）和视图（View）之间的双向绑定。
用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。
在react中是单向数据绑定，而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢？我猜测是两种不同的机制有不同的适应场景，查了一些资料后，总结一下。
一、各自优势
双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时，页面自动发生更新。但是有一个缺点也是因为自动更新而导致的，因为这样你就不知道data什么时候变了，也不知道是谁变了，变化后也不会通知你，当然你可以watch来监听data的变化，但是这变复杂了，还不如单向数据绑定。
所以说按照方神的说法：Vuex推荐单向绑定就是为了[控制欲]！，虽然单向绑定牺牲了一部分便捷性，换来的是更大的[控制力]
除此之外单向数据绑定对于复杂应用来说是实施统一的状态管理，方便跟踪。
更多讨论见知乎：https://www.zhihu.com/question/49964363
二、单向数据与双向数据关系
单向数据绑定的实现思路：
- 所有数据只有一份
- 一旦数据变化，就去更新页面(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">
同样也实现了双向数据绑定，所以它并不是什么黑魔法！
以上是关于双向数据绑定和单向数据绑定解释的主要内容，如果未能解决你的问题，请参考以下文章