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

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

什么是单向数据流

数据流,表明的是数据流向,用大白话说就是数据传递。那么单项数据流 是我们的数据单一方向传输。对于 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简介及配置使用
1170 0
|
Linux
Linux基础命令---mput上传ftp文件
mput 使用lftp登录ftp服务器之后,可以使用put指令将文件上传到服务器。mput指令可以使用通配符,而put指令则不可以。 1、语法 mput [-c] [-d] [-a] [-E] [-O base] files 2、选项列表 -d 穿件与文件...
4894 0
|
网络协议 算法 Ubuntu
BBR一键安装脚本 BBR/魔改/暴力/BBRplus/锐速(Lotsever)
BBR是 Google 提出的一种新型拥塞控制算法,可以使 Linux 服务器显著地提高吞吐量和减少 TCP 连接的延迟
75794 5
BBR一键安装脚本 BBR/魔改/暴力/BBRplus/锐速(Lotsever)
|
人工智能 自然语言处理 搜索推荐
AI浪潮下,医生、老师、律师何以不失业?
本文探讨了人工智能(AI)在医生、老师和律师等传统职业中的应用,强调AI与其说是替代,不如说是辅助与协作的关系。在医疗领域,AI助力医生提高诊断效率;在教育行业,AI为老师提供个性化教学支持;在法律界,AI帮助律师优化案件分析。同时,生成式人工智能认证(GAI认证)可提升从业者竞争力,推动跨领域合作。总之,AI不仅不会导致失业,反而将促进这些职业的转型升级,创造更多价值与发展机会。
|
应用服务中间件 Linux 测试技术
Tomcat启动错误:组件启动失败StandardEngine[Catalina].StandardHost[localhost].StandardContext[]
解决此类问题需要系统地排查和分析,有时候甚至需要根据应用的具体情况定制化解决方案。注意的是,如果问题涉及到复杂的应用逻辑或第三方库,那么可能需要深入到具体的应用代码和库文档中查找原因。最后,保持软件环境的更新也是预防这类问题的好习惯,因为新版本的软件通常会修复旧版本中的已知错误。
1266 12
|
前端开发 JavaScript 数据管理
什么是单向数据流
什么是单向数据流
858 1
|
前端开发 JavaScript 安全
剖析跨域问题始末及其解决方案——前端必备交叉知识(一)
跨域问题是前端开发中的常见挑战,了解并掌握不同的跨域解决方案能帮助你更高效地进行开发工作。本文对同源策略、跨域以及解决跨域的三种方案: CORS、JSONP、代理等跨域技术进行了介绍。选择合适的跨域解决方案非常重要。 在实际开发中,推荐优先考虑使用 CORS,因为它是现代浏览器支持的标准,且安全性较高。如果服务器无法修改,则可以考虑使用代理。如果是特殊情况,可以使用 JSONP,但要注意安全性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错
|
调度 Android开发 UED
Android经典实战之Android 14前台服务适配
本文介绍了在Android 14中适配前台服务的关键步骤与最佳实践,包括指定服务类型、请求权限、优化用户体验及使用WorkManager等。通过遵循这些指南,确保应用在新系统上顺畅运行并提升用户体验。
1381 6
|
弹性计算 网络安全
快速部署 RAGFlow 社区版
RAGFlow是一个基于深度文档理解的开源RAG(检索增强生成)引擎。当与LLM集成时,它能够提供真实的问答功能,并得到各种复杂格式数据的充分引用的支持。本文介绍如何通过计算巢快速部署 RAGFlow社区版。
快速部署 RAGFlow 社区版