Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "Vue two-way binding and one-way data flow conflict", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Vue two-way binding and one-way data flow conflict" article.

Unidirectional binding vs bidirectional binding

One-way and two-way binding refers to the mapping between the View layer and the Model layer.

React is bound unidirectionally, as shown in the figure:

In React, when the View layer changes, the user handles it by issuing Actions, the State is updated through setState in Actions, and the View update is triggered after the State update. As you can see, the View layer cannot directly modify State, but must operate through Actions, which is more clear and controllable.

The advantage of one-way binding is that it is clear and controllable, while the disadvantage is that there is some template code. Vue supports both one-way and two-way binding.

Unidirectional binding: interpolation form {{data}}, v-bind is also unidirectional binding

Bi-directional binding: the v-model of the form, and the user's changes to the View layer are synchronized directly to the Model layer

In fact, v-model is just a syntactic sugar for v-bind:value and v-on:input, and we can also take an one-way binding similar to react. Both have their own advantages and disadvantages, one-way binding is clear and controllable, but there is too much template code, two-way binding can simplify development, but it will also lead to opaque data changes, advantages and disadvantages coexist, we can use it according to the situation.

Unidirectional data flow vs bidirectional data flow

Data flow refers to the flow of data between components.

Both Vue and React are unidirectional data flow models. Although vue has bidirectional binding v-model, the data transfer between vue and react parent and child components still follows unidirectional data flow. The parent component can pass props to the child component, but the child component cannot modify the props passed by the parent component, and the child component can only notify the parent component of the data change through events, as shown in the figure:

Through the model of one-way data flow, all state changes can be recorded and tracked. Compared with two-way data flow, it is easier to maintain and locate problems.

Why v-model is just grammatical sugar

You can use the v-model instruction to create two-way data bindings on forms and elements. It automatically selects the correct method to update the element based on the control type. Magical as it is, v-model is essentially nothing more than grammatical candy. It is responsible for monitoring user input events to update data, and to do some special handling for some extreme scenarios.

As mentioned above, the Vue document says that v-model is just a syntax sugar.

/ / when used in a component, the one-way data flow equivalent to the following abbreviated view is also syntactic sugar, which is also implemented by vue authors through certain methods.

The real reason has been mentioned above. Data binding is the mapping between View and Model. Data flow refers to the data flow between components. V-model is not a real two-way data flow, because it cannot directly modify the value of the parent component. For example, if you bind the value in props in v-model, it can only bind the value of the component.

Real bi-directional data flows, such as AngularJs, allow the value of the parent component to be updated directly in the child component, which is why v-model is just a syntax sugar.

Summary

Generally speaking, one-way and two-way data binding and data flow are two different dimensional concepts. Data binding is the mapping relationship between View and Model, and data flow refers to the data flow between components. Therefore, one-way data flow can also have two-way binding, and two-way data flow can also have two-way binding. The two should not be confused.

The above is about the content of this article on "is there a conflict between two-way binding of Vue and one-way data flow"? I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.