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

更新日期: 2017-11-29阅读量: 3786标签: 数据

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


一、各自优势

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

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

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


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

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

  1. 所有数据只有一份
  2. 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
  3. 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

其实单向绑定也有双向绑定的意味,不过页面变动后数据的变化不会自动更新。方神解析了这个魔法:双向绑定 = 单向绑定 + 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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Vue 关于单向数据流的简单理解

单双向绑定,指的是 view层和 model 层之间的映射关系。Vue 在数据操作上支持单向绑定和双向绑定:单向绑定:例如 Mustache 插值语法,v-bind 等;双向绑定:即表单的 v-model 。它实际上是一个语法糖

js中的栈、堆、队列、内存空间

栈的特点是LIFO,即后进先出(Last in, first out)。数据存储时只能从顶部逐个存入,取出时也需从顶部逐个取出。队列的特点是是FIFO,即先进先出(First in, first out)。堆的特点是无序的key-value键值对存储方式。

几行代码就能完成 Web 组件的数据绑定

数据绑定最早是被 Angular、Backbone 和 Ember 等框架推广而流行开来的,现在则在某种程度上是编写视图的标准途径。它能让“视图作为数据的函数”,意味着每当某些数据发生变化时,相关视图将“自动”更新。

web scraper 抓取网页数据的几个常见问题

如果你想抓取数据,又懒得写代码了,可以试试 web scraper 抓取数据。如果你在使用 web scraper 抓取数据,很有可能碰到如下问题中的一个或者多个,而这些问题可能直接将你计划打乱,甚至让你放弃 web scraper 。

mysql大批量插入数据四种方法

循环插入这个也是最普通的方式,如果数据量不是很大;减少连接资源,拼接一条sql;使用存储过程;使用MYSQL LOCAL_INFILE,数据实在太大也涉及分库分表了,或者使用队列插入了。

Vue项目数据动态过滤实践

页面从后台拿到的数据是由0、1之类的key,而这个key代表的value比如0-女、1-男的对应关系是要从另外一个数据字典接口拿到的

单向数据流和双向数据流

react的特色是单向数据绑定;而vue中的特色是双向数据绑定。不过vuex和redux这两个状态管理器都是提倡单向数据流来管理数据。只不过vue为了众多UI控件的考虑提供了双向数据绑定的方式

Js如何向 ArrayBuffer 写入Uint64数据?

JS 的 Number 精度只有 「-2^52 ~ 2^52 - 1」,可以通过 Number.MAX_SAFE_INTEGER 查看 JS 的安全运算范围。由于这个原因,在一些需要更精确运算的应用场景中,JS Number 精度就不够了,例如需要把 64 位数字写入到 buffer 数组中。

js常见的八种数据结构

数组(Array)数组是最简单、也是使用最广泛的数据结构。栈(Stack)栈是一种特殊的线性表,仅能在线性表的一端操作,栈顶允许操作,栈底不允许操作。

ES6中的Set数据结构以及使用使用场景

Set 是ES6提供的一种新的数据结构,它允许你存储任何类型的唯一值,而且Set中的元素是唯一的。我们用new操作符来生成一个Set对象,set结构的实例有以下属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!