Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are there performance benefits of one-way binding in Angular 1

Tags:

angularjs

When reading about one-way binding in angular.component style, I came across multiple statements that < vs = produces less watchers (= will have additional watcher to propagate value change from child to parent).

However I've just created a dummy component, passed the object to it via = and < and number of watchers is the same.

So speaking strictly about performance: are there any diffirence between < and = ?

like image 407
dragonfly Avatar asked Apr 06 '17 15:04

dragonfly


People also ask

Which is better one way binding or two way binding?

one way data binding is better approach because of unidirectional flow of data.

Why one way data binding is better?

One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.

What's the difference between one way and two way data binding in Angular?

In a two-way binding, the data flow is bi-directional. This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.


1 Answers

I came here with the same question, and was disappointed to see no answer... I have a small test application where I use all kinds of binding, three of them being one-way. I observed the number of watches (using ng-stats utility), got 42. I changed these "<" to "=", which changed the behavior of my app accordingly, of course. ng-stats still reported 42 watches.
So, at least in terms of watches, this brings no performance improvement.

I guess it is here more as a convenience, avoiding unwanted side effects (child changing a value, parent's value being changed unwillingly) and promoting good practices (using bound functions instead of watches, as explained below).

It can still be a way to avoid watches: a common practice when a parent wants to be advised of changes in a child it is to use two-way binding, set up a watch on the value, and react on changes.
An alternative is to set up a one-way binding (to feed the child), and to provide a callback (via a "&" binding), and thus to let the child to notify of changes via this callback.
It is more proactive and it removes a watch.

like image 158
PhiLho Avatar answered Oct 19 '22 18:10

PhiLho