The preface
React is a one-way data flow with one-way data binding, and Vue 2.x is a one-way data flow with one-way data binding and two-way data binding. Angular and AngularJS are different. What exactly is the relationship between data binding and data flow? Is one-way data binding equivalent to one-way data flow? Is support for two-way data binding necessarily two-way data flow? This article will clarify the relationships and differences between data binding and data flow in the three front-end frameworks.
Note: If the Vue version is not specified in the following article, the default is Vue 2.x. Angular refers to Angular 2 and later, while AngularJS refers to all 1.x versions of Angular.
One-way data binding vs two-way data binding
Data binding refers to the mapping between the View layer and the Model layer.
One-way data binding: Updates to the Model trigger updates to the View, while updates to the View do not trigger updates to the Model; they are one-way.
Two-way data binding: Updates to the Model trigger updates to the View, and updates to the View trigger updates to the Model, and their effects are reciprocal.
React uses one-way data binding
When the user accesses the View, they interact by triggering Events, and in the corresponding Event Handlers, they trigger Actions, which update the State of the View by calling the setState method, The State update triggers a rerendering of the View.
In React, the View layer cannot change the State directly, but must use the corresponding Actions.
Advantages and disadvantages of one-way number binding:
Advantages: All state changes can be recorded and tracked. State changes can be triggered by manual calls and easily traced back to the source.
Disadvantages: There will be a lot of similar boilerplate code, the amount of code will increase accordingly.
Vue supports one-way data binding and two-way data binding
- One-way data binding: use
v-bindProperty binding,v-onEvent binding or interpolation form{{data}}. - Two-way data binding: use
v-modelInstruction, user onViewChanges are synchronized directly toModel.
Vue’s two-way data binding refers to the use of V-model instructions for data binding, and V-Model is essentially a combination of V-bind and V-ON syntax sugar, the framework automatically help us to implement the update event. In other words, we can do one-way binding and implement similar two-way data binding ourselves.
Advantages and disadvantages of bidirectional data binding:
Advantages: The V-Model is easy to use when manipulating forms, eliminating tedious or repetitive onChange events to handle changes in each form’s data (reducing the amount of code).
Disadvantages: It is a black box operation and cannot track the changes of bidirectional binding data well.
Angular supports one-way and two-way data binding
- One-way data binding: use
[x]Property binding,(x)Event binding or interpolation form{{data}}. - Two-way data binding: use
[(x)]Syntax, user pairsViewChanges are synchronized directly toModel.
Angular bidirectional data binding is similar to Vue in that the [(x)] syntax combines property binding [x] and event binding (x).
AngularJS supports one-way and two-way data binding
- One-way data binding: use
ng-bindInstruction or interpolation form{{data}}. - Two-way data binding: use
ng-modelInstruction, user onViewChanges are synchronized directly toModel.
AngularJS implements bidirectional data binding in a completely different way from Angular. See this article for details.
One-way data flow vs two-way data flow
Data flow refers to the flow of data between components.
React, Vue, and Angular are all one-way data flows
Although Vue and Angular have bidirectional data binding, data transfer between Vue and Angualr parent components still follows a one-way data flow. That is, the parent component can pass props to the child component, but the child component cannot modify the props passed by the parent component. Child components can only notify parent components of data changes through events. As shown below:
Advantages: Because there is only one entry and exit for component data transfer, the program is more intuitive and easier to understand, which is conducive to the maintainability of the program.
AngularJS supports two-way data streaming
Two-way data flow means that the data of the parent component can be directly updated in the child component.
Disadvantages: As component data changes can come from more than one source, it is easy to disorganize the direction of the data flow if there is no corresponding “management” means. It also increases the difficulty of debugging errors.
Data flow and data binding
Strictly speaking, data flow and data binding are two different concepts, not the same thing. One-way data flows can also support two-way data binding, and two-way data flows can also support one-way data binding.
To summarize the differences between data flow and data binding in the three front-end frameworks:
reference
Isn’t Vue’s one-way data flow conflicting with two-way data binding?
Advantages and disadvantages of one-way and two-way data binding
Vue, Angular, react