为什么AngularJS中的双向数据绑定是反模式? [英] Why is two-way databinding in AngularJS an antipattern?
问题描述
AngularJS提供双向数据绑定.
AngularJS offers two-way databinding.
我构建了多个AngularJS应用，发现双向数据绑定是一项强大的功能，提高了我的工作效率.
I built several AngularJS apps and found two-way databinding to be a powerful feature, that increased my productivity.
但是最近，我越来越多地看到声称双向数据绑定是一种反模式的帖子和文章.
Recently however I come more and more across posts and articles that claim that two-way databinding is an antipattern.
示例:
- 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双向数据绑定
- 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 two-way data binding
大多数资源都主张像React/Flux所提倡的单向数据流".
Most of the resources argue in favour of "Unidirectional Dataflow" like it is promoted by React/Flux.
还Angular2 宣布一段时间了，没有双向绑定...但是最新文档显示它实际上提供了两个再次通过ngModel 进行数据绑定(在属性和事件绑定的顶部实现)
Also Angular2 announced for some time that there will be no two-way binding... but the latest documentation shows that it is actually offering two-way databinding via ngModel again (implemented on top of property- and event-binding)
但是我还没有完全理解与AngularJS中的双向数据绑定有关的问题.
However I do not yet fully understand the problems that relate to two-way databinding in AngularJS.
其他客户端技术(例如swing，eclipse-rcp，winforms，wpf ...)也提供双向数据绑定，而我从未偶然发现它是一种反模式...
Other client technologies (i.e. swing, eclipse-rcp, winforms, wpf ...) also offer two-way databinding, and I never stumbled over the claim that it is an anti-pattern ...
是否有一个规范的示例可以轻松地说明AngularJS中双向数据绑定可能导致的问题?
Is there a canonical example that easily illustrates the problems that might result from two-way databinding in AngularJS?
上面链接的视频似乎暗示了$scope.watch是问题所在. ..但该示例可以通过绑定到$scope上公开的函数而在没有$scope.watch的情况下实现.
如果您避免使用$scope(即使用controller as)，那么双向数据绑定仍然存在哪些问题?
The video I linked above seems to hint that $scope.watch is the problem ... but the example can be implemented without $scope.watch by binding to a function exposed on the $scope.
If you avoid using $scope (i.e. using controller as), what problems remain with two-way databinding?
推荐答案
实际上，双向数据绑定的主要问题是性能.
In fact, the main problem with two-way data binding is performance.
当AngularJS发布(1)时，此功能是开发人员大量使用该框架的首要原因.
When AngularJS was released (1), this feature was the foremost reason why the framework was much used by developers.
无需代码，就可以通过从模型侧或视图侧更改元素的值来使元素完全动态，并且在设置模型的任何地方都可以更改该值.
Without a line of code, you can make an element fully dynamic by changing its value from the model side or the view side, the value is changed everywhere the model is set.
在此功能中，最重要的工具是监视，它代表双向数据绑定的所有问题.
In this feature, the most important tool is the watching, and it represents all the problem with two-way data binding.
随着应用程序的发展，观察者和被观察元素的数量也在增加.
而且，一段时间后，该应用程序可能会成为观看者的一大亮点.
这将导致您的应用程序总是在反面监视元素并保持最新状态，这会消耗浏览器的大量资源.
As the application evolves, the number of watchers and watched elements increases.
Also, after a time, the application can become a big soup of watchers.
This will result in your application always watching elements and keeping up-to-date the elements at the inverse side, and that consumes a lot of resources from the browser.
这就是为什么我的建议是:尽可能避免观看者.
在控制器中几乎从来没有真正需要它们.
This is why my recommendation is: Avoid watchers as much as possible.
They are almost never really necessary in a controller.
另请参阅:
- Effective strategies to avoid watches in AngularJS
- The bad parts of AngularJS
- Performances in large AngularJS applications
希望对您来说更清楚.
这篇关于为什么AngularJS中的双向数据绑定是反模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
