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

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

在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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

Mock.js使用

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki

关于Mock.js使用

目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截ajax请求等优点。接下来就近距离结束下mockjs吧!

React 中获取数据的 3 种方法及它们的优缺点

在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。

单向数据流和双向数据流

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

node post 大数据无响应超时

使用 express 框架,post 较大数据量(富文本,里面包含了图片base64数据,大约300k)时,node 无响应,把数据内容减少后能顺利提交。是因为数据量大过body post 的限制导致不能提交。

处理 JavaScript 中的非预期数据

动态类型语言的最大问题就是无法保证数据流总是正确的,因为我们无法“强行控制”一个参数或变量,比方说,让它不为 null。当我们面对这些情况时的标准做法是简单地做一个判断:这样做的问题在于会污染我们的代码

js实现简单的数据监听

主要是用Object.defineProperty实现类似vue的数据绑定。输出的data.name 并不是tom,而是name被读取了,因为defineProperty对data的name字段进行的监听劫持,修改了,name字段本应该返回的值。

vue页面刷新时store中数据丢失

当页面刷新时,vue实例重新加载,所以store也会被重置。监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中,在页面刷新时,读取 sessionStorage 中的数据到 store 中。

网站建设的基础元数据有哪些舒心

网站建设SEO的时候,经常遇到一些术语,例基本元数据,基本元数据存储在HTML文档的头部分中,元数据用于指示编程信息指定元数据,元数据的功能是向网站传达附加信息,HTML元数据遵循相同的结构,首先定义一个元素

哪种方式更适合在React中获取数据?

当执行像数据获取这样的I/O操作时,你必须发起获取请求,等待响应,将响应数据保存到组件的状态中,最后渲染。异步的数据获取会要求额外的工作来适应React的声明性,React也在逐步改进去最小化这种额外的工作

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

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

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