Javascript 双向数据绑定（角度）与单向数据流（反应/流量）

在过去的一周里，我一直在试图弄清楚它们之间的区别。他们说，单向数据流更强大，更容易理解和遵循：它具有确定性，有助于避免副作用。但在我的新手眼中，它们看起来几乎一样：视图侦听模型，模型对视图执行的操作作出反应。两者都声称模型是唯一的真理来源

---

有谁能以可以理解的方式全面解释它们之间的区别，以及单向数据流如何更有益、更容易推理？

在Angular中，您有许多控制器。一个示例是用户触发由控制器1管理的视图1上的操作。控制器1执行某些操作，但也触发另一个控制器2捕获的事件。控制器2更新$scope上的某些属性，视图2突然更改

突然，视图1上的操作更新了视图2。如果我们现在加入一些异步回调和更多的事件链，您可能不再确切知道视图何时/如何更新

---

使用Flux/Redux，您可以获得单向数据流。视图从不更新模型，视图只能分派一个操作（更新的意图），但让存储/缩减器决定如何处理更新。您可以更容易地对数据流进行推理，因为您可以很容易地看到每个视图可以触发哪些操作。然后跟进，看看商店是如何处理该操作的，您可以确切地知道可以更新哪些内容

假设您的应用程序只是一个向导流，但它有一些复杂的交互，即一个步骤可能会改变后续步骤的行为

你的应用程序运行得很好，但有一天用户报告了其中一个棘手步骤的错误

调试如何在双向绑定和单向绑定上工作

双向装订 我会开始检查哪些行为是不同的，如果运气好的话，我会找到与用户相同的点，并找出错误。但与此同时，应用程序的不同部分之间可能会有一些奇怪的交互。我可能有一些不正确的数据绑定（例如，复制模型状态但不绑定），或者组件之间存在其他难以调试的奇怪复杂性。可能很难隔离这个bug

单向装订 您只需抓取

状态

对象。它在一个大的javascript对象中包含当前应用程序的所有信息。如果在开发环境中加载相同的状态，则应用程序的行为很可能完全相同。您甚至可以使用给定的状态编写回归测试，并精确定位正在发生的问题

结论 简单地说，单向绑定使调试复杂应用程序变得非常容易。您不需要做很多事情，然后复制用户的当前状态

即使不起作用，您也可以记录操作。例如，没有一种简单的方法可以跟踪Angular上的所有状态修改操作。使用Redux非常非常简单

数据流这里是一个写入事件流-即状态更新

这些事件在视图和控制器（以及服务，如HTTP后端）之间流动

单向流基本上是一个巨大的循环：

• 应用程序视图使用（读取，而不是写入）应用程序状态进行渲染
• 当应用程序从外部获得一些刺激（用户在输入字段中键入一些文本，或者HTTP请求的结果已经到达）时，它会发出write事件，或者用Redux/Flux俚语来说，发送一个动作
• 来自所有控制器和视图的所有事件都流入单接收器调度功能（reducer）；虽然分派函数的性质允许它由更简单的分派函数组成，但从概念上讲，整个应用程序只有一个分派器
• dispatcher使用事件确定要更新状态的哪一部分
• 开始

双向流aka数据绑定绑定两个状态：在大多数情况下，一个在控制器内部（例如某些变量），另一个在视图内部（例如文本框的内容）绑定意味着，当一个片段发生变化时，另一个片段也会发生变化并获得相同的值，因此您可以假装只涉及一个状态片段（而实际上有两个）Write事件在控制器和视图之间来回移动，因此是双向的

当您需要弄清楚哪个变量包含这个特定文本框的内容时，数据绑定很酷——它会立即显示出来。但它需要复杂的框架来维持一个状态的假象，而实际上有两个状态。通常，您将被迫使用特定于框架的语法来编写视图的代码-i。E学习另一种语言

当您可以利用额外的实体-事件流时，单向数据流是很酷的。而且，通常，您可以-它对于撤销/重做、用户操作重放（例如调试）、复制等非常有用。支持这一点的代码非常简单，通常可以用纯JavaScript编写，而不是使用特定于框架的语法。另一方面，由于不再具有数据绑定，因此它不再为您保存一些样板文件

此外，请参见此答案中的精彩视觉解释：。单箭头和双头箭头分别直观地表示单向和双向数据流。

Angular的双向数据绑定 这是由一种机制实现的，该机制可以在视图和模型发生任何更改时同步视图和模型。在Angular中，更新变量，其更改检测机制将负责更新视图，反之亦然。有什么问题吗？你不能控制变化