AngularJS:为什么ng-bind在角度方面比{{}}好?

JavaScript

Stafan

2020-04-03

我参加了一次有角度的演讲,会议中提到的一位参加者ng-bind胜于{{}}束缚。

原因之一是ng-bind将变量放在监视列表中,并且仅当发生模型更改时,才将数据推送到视图中查看;另一方面,{{}}每次都会对表达式进行插值(我想这是角周期)并推送值,即使值更改与否。

也有人说,如果屏幕上没有太多数据,则可以使用{{}},并且性能问题将不可见。有人可以帮我阐明一下这个问题吗?

第3958篇《AngularJS:为什么ng-bind在角度方面比好?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
泡芙西门 2020.04.03

您可以参考此站点,它将向您解释哪种方法更好,据我所知{{}},它比ng-bind慢。

http://corpus.hubwiz.com/2/angularjs/16125872.html 引用此站点。

番长樱梅 2020.04.03

ng-bind也有问题。当您尝试使用角度滤镜限制或其他功能时,如果使用ng-bind可能会遇到问题但是在其他情况下,ng-bindUX方面更好。当用户打开页面时,他/她将看到(10ms-100ms)打印符号({{...}}),这就是ng-bind更好的原因。

猪猪 2020.04.03

{{}}中存在一些闪烁的问题,例如刷新页面后会看到一小段时间的垃圾邮件,因此我们应该使用ng-bind而不是表达式进行数据描述。

猪猪 2020.04.03

在此处输入图片说明

Ng-Bind之所以更好的原因是,

当您的页面未加载或互联网速度缓慢或网站加载了一半时,您会看到这些类型的问题(检查带有已读标记的屏幕快照)将在完全奇怪的屏幕上触发。为了避免这种情况,我们应该使用Ng-bind

斯丁前端 2020.04.03

这是因为使用{{}}角度编译器会同时考虑文本节点及其父节点,因为可能会合并两个{{}}节点。因此,还有其他链接程序会增加加载时间。当然,对于少数这种情况,差异并不重要,但是在大量项目的中继器中使用它时,会在较慢的运行时环境中产生影响。

番长梅 2020.04.03

ng-bind 胜过 {{...}}

例如,您可以这样做:

<div>
  Hello, {{variable}}
</div>

这意味着将Hello, {{variable}}包围其中的整个文本<div>并将其存储在内存中。

相反,如果您执行以下操作:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

仅该值的值将存储在内存中,而angular将注册仅包含变量的监视程序(监视表达式)。

西门Gil 2020.04.03

基本上,double-curly语法更自然易读,并且需要更少的键入。

两种情况都产生相同的输出,但是..如果选择继续使用{{}},则用户有可能会看到几毫秒的时间,{{}}然后才能通过角度渲染模板。因此,如果您发现有任何{{}}更好的用法ng-bind

同样非常重要的是,只有在角度应用程序的index.html中,您才能取消渲染{{}}如果使用指令,则使用模板,那么就没有机会看到它,因为angular首先渲染模板,然后将其附加到DOM。

村村 2020.04.03

如果您没有使用ng-bind,则类似以下内容:

<div>
  Hello, {{user.name}}
</div>

您可能会Hello, {{user.name}}user.name解决之前(在加载数据之前看到一秒钟的实际

你可以做这样的事情

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

如果这对您来说是个问题。

另一个解决方案是使用ng-cloak

2020.04.03

{{...}}是指双向数据绑定。但是,ng-bind实际上是用于单向数据绑定的。

使用ng-bind将减少您页面中观察者的数量。因此ng-bind将比快{{...}}因此,如果您只想显示一个值及其更新,并且不想将其更改从UI反映回控制器,请使用ng-bind这将提高页面性能并减少页面加载时间。

<div>
  Hello, <span ng-bind="variable"></span>
</div>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android