为什么 AngularJS 中的双向数据绑定是一种反模式

Why is two-way databinding in AngularJS an antipattern?

本文关键字：一种模式 AngularJS 数据绑定为什么更新时间：2023-09-26

AngularJS提供双向数据绑定。

我构建了几个 AngularJS 应用程序，发现双向数据绑定是一个强大的功能，它提高了我的工作效率。

然而，最近我越来越多地看到声称双向数据绑定是一种反模式的文章和文章。

例子：

https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903#.py84tbylf
https://www.dotnetrocks.com/?show=1147
https://www.youtube.com/watch?v=DslsyqnyjQE
Angular2 双向数据绑定

大多数资源都支持"单向数据流"，就像React/Flux所提倡的那样。

此外，Angular2 也宣布了一段时间，不会有双向绑定......但最新的文档显示，它实际上再次通过ngModel提供双向数据绑定(在属性和事件绑定之上实现(

但是，我还没有完全理解与AngularJS中的双向数据绑定相关的问题。

其他客户端技术(即 swing、eclipse-rcp、winforms、wpf ...(也提供双向数据绑定，我从来没有偶然发现它是一个反模式的说法......

是否有一个规范的例子可以轻松说明 AngularJS 中的双向数据绑定可能导致的问题？

我上面链接的视频似乎暗示$scope.watch是问题所在......但是该示例可以通过绑定到$scope上公开的函数来实现而无需$scope.watch。
如果避免使用$scope(即使用controller as(，双向数据绑定仍然存在哪些问题？

事实上，双向数据绑定的主要问题是性能。

当AngularJS发布(1(时，这个特性是开发人员广泛使用该框架的最重要原因。

无需一行代码，您可以通过从模型端或视图端更改元素的值来使元素完全动态，该值在设置模型的任何地方都会更改。

在此功能中，最重要的工具是监视，它代表了双向数据绑定的所有问题。

随着应用程序的发展，观察程序和被监视元素的数量也会增加。
此外，一段时间后，该应用程序可以成为观察者的一大锅。
这将导致您的应用程序始终监视元素并使反面的元素保持最新，这会消耗浏览器中的大量资源。

这就是为什么我的建议是：尽可能避免观察者。
它们在控制器中几乎从来都不是真正必要的。

另请参阅：

希望你更清楚。

双向数据绑定可能是它自己的问题：一个模型可以更新一个视图，这个视图可以更新一个模型，而模型又可以更新另一个模型......单向数据流更可预测。