Можно использовать ng-bind или {{}}?

Question

Можно использовать ng-bind или {{}}?

0

Хорошо, поэтому я прочитал в нескольких местах, что использование ng-bind лучше для производительности. Но, глядя на эти jsperfs, я немного смущен :)

https://jsperf.com/angular-bind-vs-brackets

http://jsperf.com/ng-bind-vs-brackets/14

Итак, что лучше всего подходит для производительности?

{{::value}}

или

<div ng-bind="value"></div>

Mackelito 09 сен. 2015, в 10:50

Источник

4

ng-bind используется для односторонней привязки, а {{}} - для двусторонней привязки. Для одностороннего связывания - angular не следит за изменением переменной или нет. Но для двухсторонней привязки - угловое наблюдение, будет ли эта переменная изменяться или нет, а если значение меняется, то угловое отражает newValue в Html или JS.
gaurav bhavsar 09 сен. 2015, в 08:32
0

Так что, если мы будем сравнивать их более равномерно, то {{:: value}} - лучший вариант, когда речь идет о производительности?
Mackelito 09 сен. 2015, в 08:34
0

Возможно, но это выглядит не очень красиво, показывая {{le value}} пользователю долю секунды, когда загружается шаблон. Поэтому вам следует использовать только {{}} там, где он не будет виден пользователю.
Chrillewoodz 09 сен. 2015, в 08:36
0

Обратите внимание: «Атрибут ngBind указывает Angular заменять текстовое содержимое указанного HTML-элемента значением данного выражения и обновлять текстовое содержимое при изменении значения этого выражения ». ( ref ). Оба ng-bind и {{...}} являются односторонними обновляемыми (наблюдаемыми) привязками, то есть модель -> вид. Также обратите внимание, что второй jsperf сравнивает ng-bind с ng-model - две разные вещи. @Mackelito: Я бы предложил проверить себя в вашем конкретном случае. Это должно быть очень просто.
Nikos Paraskevopoulos 09 сен. 2015, в 08:41
0

@Crillewoodz мы используем нг-плащ, так что это не проблема для нас.
Mackelito 09 сен. 2015, в 08:44
0

@NikosParaskevopoulos Я обновил URL теста :)
Mackelito 09 сен. 2015, в 08:53
0

@Mackelite 2WayBinding угловой вызов $apply() для запуска $digestCycle проверит все переменные scope которые являются 2WayBinding . Если вам нужно обновлять значение каждый раз при любом действии, тогда лучше использовать 2WayBinding , но если нет необходимости изменять значение, тогда вам необходимо использовать ng-bind . Вывод : ng-bind лучше всего подходит для повышения производительности, поскольку он сводит digestCycle к отслеживанию изменений в oldValue с помощью newValue
gaurav bhavsar 09 сен. 2015, в 08:53
0

@gauravbhavsar: если мы будем использовать {{:: value}}? Посмотрите на обновленный тест, и есть огромная разница.
Mackelito 09 сен. 2015, в 08:56
0

Возможный дубликат AngularJS: почему ng-bind лучше, чем {{}} в angular?
ivahidmontazer 19 фев. 2017, в 12:42

Показать ещё 7 комментариев

Теги:

angularjs

brackets

ng-bind

3 ответа

Ещё вопросы

ng-bind используется для односторонней привязки, а {{}} - для двусторонней привязки. Для одностороннего связывания - angular не следит за изменением переменной или нет. Но для двухсторонней привязки - угловое наблюдение, будет ли эта переменная изменяться или нет, а если значение меняется, то угловое отражает newValue в Html или JS.
Так что, если мы будем сравнивать их более равномерно, то {{:: value}} - лучший вариант, когда речь идет о производительности?
Возможно, но это выглядит не очень красиво, показывая {{le value}} пользователю долю секунды, когда загружается шаблон. Поэтому вам следует использовать только {{}} там, где он не будет виден пользователю.
Обратите внимание: «Атрибут ngBind указывает Angular заменять текстовое содержимое указанного HTML-элемента значением данного выражения и обновлять текстовое содержимое при изменении значения этого выражения ». ( ref ). Оба ng-bind и {{...}} являются односторонними обновляемыми (наблюдаемыми) привязками, то есть модель -> вид. Также обратите внимание, что второй jsperf сравнивает ng-bind с ng-model - две разные вещи. @Mackelito: Я бы предложил проверить себя в вашем конкретном случае. Это должно быть очень просто.
@Crillewoodz мы используем нг-плащ, так что это не проблема для нас.
@Mackelite 2WayBinding угловой вызов $apply() для запуска $digestCycle проверит все переменные scope которые являются 2WayBinding . Если вам нужно обновлять значение каждый раз при любом действии, тогда лучше использовать 2WayBinding , но если нет необходимости изменять значение, тогда вам необходимо использовать ng-bind . Вывод : ng-bind лучше всего подходит для повышения производительности, поскольку он сводит digestCycle к отслеживанию изменений в oldValue с помощью newValue
@gauravbhavsar: если мы будем использовать {{:: value}}? Посмотрите на обновленный тест, и есть огромная разница.
Возможный дубликат AngularJS: почему ng-bind лучше, чем {{}} в angular?

CMR · Answer 1 · 2015-09-09T06-50-00.000Z

Вы должны использовать ng-bind. Его директива, которая ставит наблюдателя на эту переменную, поэтому она обновляется только при изменении переменной, а {{}} будет грязно проверять и обновлять переменную в каждом цикле дайджеста.

См. Этот ответ

Также :: называется "bindonce" и будет устанавливать переменную только один раз и после этого не обновляться.

e: jsperf проверяет привязку переменной к html (я думаю), в то время как связанный ответ фокусируется на поведении потом. Если у вас есть 100 фигурных скобок и вы обновляете одну модель, каждый {{}} обновляется. Хотя ng-bind обновляется только в том случае, если сама переменная изменяется, поскольку она создает наблюдателя для этой переменной.

Ответ, на который вы ссылаетесь, более 1 года. Действительно ли он все еще действителен? Хотите прокомментировать тесты jsperf? .. Почему это показывает, что {{}} быстрее?

EscapeNetscape · Answer 2 · 2016-10-24T14-20-00.000Z

Когда дело доходит до одноразовой привязки, вы также должны использовать двоеточие в ng-bind.

Поэтому используйте ng-bind="::value"

для фильтра или выражений вы должны использовать скобки: ng-bind="::(value | number:2)"

areschen · Answer 3 · 2015-09-09T06-56-00.000Z

-3

лучше использовать ng-bind. Если файлы javascript не загружены, {{}} отобразится на странице.

areschen 09 сен. 2015, в 06:56

1

Вопрос был о производительности ..;)
Mackelito 09 сен. 2015, в 08:52
5

Вы можете скрыть {{}} используя ng-cloak
gaurav bhavsar 09 сен. 2015, в 08:55
0

извините, я не выглядел тщательно, вопрос {{:: value}} должен сравниваться с ng-bind = ":: value" ， оба они привязаны один раз. но нг
areschen 09 сен. 2015, в 13:39

Показать ещё 1 комментарий