View profile

Mastering JS - One Way Data Flow in Vue

One way data flow was a concept popularized by React in 2014 and 2015. It was a response to two-way d
Mastering JS - One Way Data Flow in Vue
One way data flow was a concept popularized by React in 2014 and 2015. It was a response to two-way data binding in Angular 1.x, the most popular frontend framework at the time. Two-way data binding made forms easy, but lead to a lot of “10 $digest() iterations reached. Aborting!” errors.
The issue with two way data binding is that it is easy to trigger an infinite loop. Seemingly innocuous patterns like repeating over a filtered array lead to infinite loops.
Vue’s two-way data binding via v-model is different. Under the hood it’s one-way data flow: data binding down the component tree from parent to child, and events bubbling up the component tree from child to parent. The key difference is that Vue actually observes values for changes, as opposed to Angular 1, which diffs the entire state after the fact. For example, if you use v-bind on an array, Vue will overwrite the native array’s sort() function with a Vue-aware sort function.

Custom sort() Function in Vue
Custom sort() Function in Vue
This means that Vue is aware of changes as they happen, rather than reconciling what happened after the fact.
This Week's Tutorials
Did you enjoy this issue?
Mastering JavaScript Tutorials

Mastering JavaScript Tutorials

If you don't want these updates anymore, please unsubscribe here
If you were forwarded this newsletter and you like it, you can subscribe here
Powered by Revue