单向数据流和双向数据绑定有什么区别,以及他们的优缺点?

简介: 单向数据流和双向数据绑定有什么区别,以及他们的优缺点?

什么是单向数据流

数据流,表明的是数据流向,用大白话说就是数据传递。那么单项数据流 是我们的数据单一方向传输。对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性。

什么是双向数据绑定

当我们在前端开发中采用 MV*的模式时,M - model,指的是模型,也就是数据,V - view,指的是视图,也就是页面展现的部分。通常,我们需要编写代码,将从服务器获取的数据进行“渲染”,展现到视图上。每当数据有变更时,我们会再次进行渲染,从而更新视图使得视图与数据保持一致

而另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,我们则编写代码,将视图对数据的更新同步到数据,以致于同步到后台服务器

单线数据流的优缺点?

优点:

所有状态的改变可记录、可跟踪,源头易追溯;

所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;

一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);

如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
缺点:

HTML 代码渲染完成,无法改变,有新数据,就须把旧 HTML 代码去掉,整合新数据和模板重新渲染;

代码量上升,数据流转过程变长,出现很多类似的样板代码;
同时由于对应用状态独立管理的严格要求(单一的全局 store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。

双向数据绑定的优缺点?

优点:

用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去;

无需进行和单向数据绑定的那些相关操作;

在表单交互较多的场景下,会简化大量业务无关的代码。
缺点:

无法追踪局部状态的变化;

“暗箱操作”,增加了出错时 debug 的难度;
由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若再缺乏“管制”手段,血崩。

这样来看,单向绑定跟双向绑定在功能上基本上是互补的,所以我们可以在合适的场景下使用合适的手段。比如在 UI 控件 中(通常是类表单操作),我会使用双向的方式绑定数据;而其他场景则统一采用 单向 + inline event ( <component :msg=“msg” @update=“updateMsg(msg)”> ) 的方式构建应用。


相关文章
|
Java 应用服务中间件 Maven
Maven简介及配置使用
Maven简介及配置使用
1072 0
|
Linux
Linux基础命令---mput上传ftp文件
mput 使用lftp登录ftp服务器之后,可以使用put指令将文件上传到服务器。mput指令可以使用通配符,而put指令则不可以。 1、语法 mput [-c] [-d] [-a] [-E] [-O base] files 2、选项列表 -d 穿件与文件...
4739 0
|
人工智能 自然语言处理 搜索推荐
AI浪潮下,医生、老师、律师何以不失业?
本文探讨了人工智能(AI)在医生、老师和律师等传统职业中的应用,强调AI与其说是替代,不如说是辅助与协作的关系。在医疗领域,AI助力医生提高诊断效率;在教育行业,AI为老师提供个性化教学支持;在法律界,AI帮助律师优化案件分析。同时,生成式人工智能认证(GAI认证)可提升从业者竞争力,推动跨领域合作。总之,AI不仅不会导致失业,反而将促进这些职业的转型升级,创造更多价值与发展机会。
|
11月前
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1723 137
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
715 2
|
9月前
|
存储 JavaScript 前端开发
Web Storage和Cookie有什么区别?
Web Storage和Cookie有什么区别?
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
1671 8
|
前端开发 JavaScript 数据管理
什么是单向数据流
什么是单向数据流
665 1
|
缓存 前端开发 JavaScript
前端性能优化都有那些方案 ?
【7月更文挑战第11天】 前端性能优化包括资源合并压缩、懒加载、CDN使用、代码优化、缓存利用和图片优化等策略。例如,减少HTTP请求、压缩CSS/JS、事件委托、利用浏览器及服务器缓存、选择合适图片格式等,旨在提升网页速度和用户体验。服务工作者、异步加载和响应式设计也是关键。持续学习新技术以适应不断变化的优化需求。
1521 1
|
JavaScript API
一个简单的Vue移动端抽奖页面的示例
一个简单的Vue移动端抽奖页面的示例
766 1