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

时间: 2017-11-29阅读: 1362标签: 数据

在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

js常见的八种数据结构

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

表现与数据分离、web语义化的理解

什么是表现与数据分离?一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数据。二是前端页面展现与数据处理分离

让前端监控数据采集更高效

随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。

vue数据初始化--initState

Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。首先,来看一下他的代码:

cookie和session区别是什么?

HTTP无状态协议,是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

JS实现前端将数据导出excel

方法一将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下

node.js同步调用获取mysql数据时遇到的大坑

mysql调用获取数据,只能是异步方式返回结果,不能同步获取结果,因此,须在回调函数中编写处理事件。期间看了下Aysnc.js,是用于多个要返回回调函数的事件,将这些事件有序的组织起来,最后只返回一个回调函数,并没有改变异步的本质,而是将多个异步整合为一个异步,从而满足写程序的需求。

使用Proxy实现双向绑定

vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。

几个数据持久化框架Hibernate、JPA、Mybatis、JOOQ和JDBC Template的比较

因为项目需要选择数据持久化框架,看了一下主要几个流行的和不流行的框架,对于复杂业务系统,最终的结论是,JOOQ是总体上最好的,可惜不是完全免费,最终选择JDBC Template。

在 JavaScript 中优雅的提取循环内的数据

在本文中,我们将介绍两种提取循环内数据的方法:内部迭代和外部迭代。内部迭代:提取循环内数据的第一个方法是内部迭代,内部迭代的替代方案是外部迭代:我们实现了一个iterable

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全