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

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

什么是单向数据流

数据流,表明的是数据流向,用大白话说就是数据传递。那么单项数据流 是我们的数据单一方向传输。对于 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简介及配置使用
1114 0
|
Linux
Linux基础命令---mput上传ftp文件
mput 使用lftp登录ftp服务器之后,可以使用put指令将文件上传到服务器。mput指令可以使用通配符,而put指令则不可以。 1、语法 mput [-c] [-d] [-a] [-E] [-O base] files 2、选项列表 -d 穿件与文件...
4802 0
|
人工智能 自然语言处理 搜索推荐
AI浪潮下,医生、老师、律师何以不失业?
本文探讨了人工智能(AI)在医生、老师和律师等传统职业中的应用,强调AI与其说是替代,不如说是辅助与协作的关系。在医疗领域,AI助力医生提高诊断效率;在教育行业,AI为老师提供个性化教学支持;在法律界,AI帮助律师优化案件分析。同时,生成式人工智能认证(GAI认证)可提升从业者竞争力,推动跨领域合作。总之,AI不仅不会导致失业,反而将促进这些职业的转型升级,创造更多价值与发展机会。
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1878 137
|
9月前
|
数据可视化 前端开发 数据管理
什么是低代码?一文看懂:低代码技术的发展历程及技术架构
低代码开发平台通过可视化界面与组件化设计,大幅降低编程门槛,使开发者无需大量编码即可快速构建应用。它具备可视化开发、预制组件、低技术门槛及全流程支持等核心特征,适用于业务流程自动化、数据管理、客户关系管理等多种场景。自萌芽期至今,低代码不断演进,成为企业数字化转型的重要工具,显著提升开发效率、降低成本,并推动全民开发者时代的到来。
1162 0
什么是低代码?一文看懂:低代码技术的发展历程及技术架构
|
11月前
|
存储 JavaScript 前端开发
Web Storage和Cookie有什么区别?
Web Storage和Cookie有什么区别?
|
前端开发 JavaScript 数据管理
什么是单向数据流
什么是单向数据流
752 1
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
746 2
|
JavaScript 数据管理
谈谈对Vue.js的单向数据流和双向数据绑定的理解。
谈谈对Vue.js的单向数据流和双向数据绑定的理解。
339 2
|
缓存 负载均衡 监控
性能优化:Node.js高效服务器开发技巧与最佳实践
【10月更文挑战第29天】在Node.js服务器开发中,性能优化至关重要。本文介绍了几种高效开发的最佳实践,包括使用缓存策略、采用异步编程、实施负载均衡和性能监控。通过示例代码展示了如何实现这些技术,帮助开发者构建更快、更稳定的Node.js应用。
572 2