单向数据流和双向数据流

更新日期: 2020-01-05 阅读: 5.1k 标签: 数据

vuereact

react的特色是单向数据绑定;而vue中的特色是双向数据绑定。不过vuex和redux这两个状态管理器都是提倡单向数据流来管理数据。只不过vue为了众多UI控件的考虑提供了双向数据绑定的方式,这样在一些需要实时显示用户需求的时候会非常方便。


单向数据流

state:驱动应用的数据源。view:以生命方式将state映射到视图。actions:响应在view上的用户输入导致状态变化

单向数据流过程:简单的单向数据流是指用户访问view,view发出用户交互的action,在action里面对state进行相应更新,state更新会触发view更新页面的过程

特点:
1 所有状态的改变可记录,可跟踪,源头易追溯
2 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性
3 一旦状态发生改变,就去更新页面
4 如果用户在页面上做了改动,那么就手动收集起来(双向是自动),合并到原有的数据中


双向数据流

双向数据绑定,带来了双向数据流。数据(state)和视图(view)之间的双向绑定

数据模型和视图模型之间的双向绑定。无论数据改变还是用户操作,都能够带来互相的变动,自动更新

双向数据绑定=单向数据绑定+UI事件监听

特点:
1 用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变换,也会立刻同步到视图中去
2 无需进行额单向数据绑定的create,retrieve,update,delete操作
3 在表单交互较多的场景下,会简化大量业务无关的代码


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7203

相关推荐

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

进制转换_二进制、八进制和十六进制数之间的转换

在计算机语言中常用的进制有二进制、八进制、十进制和十六进制,十进制是最主要的表达形式。对于进制,有两个基本的概念:基数和运算规则。

mock.js模拟数据

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

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

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

nodejs 使用 xlsx 实现导入导出

将数据导出成excel方法,下面介绍两种方式,一种是将数组数据导出成excel,一种是将json数据导出成excel,都非常简单

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

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

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

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

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

Nginx返回大长度的JSON数据被截断

1 添加Nginx参数,增加缓存字符串大小;2 遇到权限问题,原因是大文件会先缓存到/proxy-temp文件夹下面,然后再返回;修改文件夹的权限为Nginx用户

点击更多...

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