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

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

在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

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

mock.js模拟数据

开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据

Highcharts数据量超过1000时无法显示问题

今天在vue的项目中引入Highcharts,想做一个大数据量的实时刷新曲线图,发现当数据量超过1000就无法显示。经过排查发现 Highcharts为了保证更好的性能设置了一个性能阈值检查

Php将数据按照千分位分割的5种方法

调用php函数处理。直接使用php的函数,但面试要求实现的应该是不让使用系统函数的,按照数字从后面数过来,每3位添加一个,那么,如果,我们把数字反转过来,然后再分割

Redis 的底层数据结构(SDS和链表)

Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。可能几乎所有的线上项目都会使用到 Redis,无论你是做缓存、或是用作消息中间件,用起来很简单方便

为什么云端会不断泄漏数据?

虽然数据泄露的程度可能会有所不同,并且数据可能因内部威胁、黑客攻击和员工疏忽而丢失,但所有数据泄露都包含了可能会被盗窃者轻易读取的个人身份信息。而云端发生的数据泄露,影响就会放大了

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

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

vue数据监听

关于数据监听,vue提供了两种方式watch和computed(计算属性),配合生命周期有的时候我们会使用使用多个组件进行传值,在watch到变化的时候往往监听的组件还没有加载完成这时候就需要配合生命周期使用

Js中的数据传输形式JSON和AJAX技术

今天为大家讲解JavaScript中的数据传输形式JSON和AJAX技术。JSON的全称是JavaScript Object Notation(js对象表示法),它是一种存储和交换文本信息的语法,主要用于序列化对象、数组、字符串、Boolean、数字和null

广东IDC网运营广州南翔云数据中心正式挂牌广州移动机房

2019年9月,中国移动广州南翔(华德)云数据中心机房正式揭牌!中国移动广州南翔云数据中心作为广东移动最新的T3+级别机房,总规模达到2600多个机柜,并已投产运营数月

将 JSON 数据格式输出至页面上

JSON 是一种轻量级的数据交换格式,它有键值对集合(js 中的对象)和数组两种结构。 JSON 是一个通用的格式,在前后端语言中都能跟该 JSON 打交道。有时候我们需要将 JSON 格式输入至页面展示的需求

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

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

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