Understand the single-item data flow and two-way data binding in Vue. Are the two conflicts?

This article will take you to understand the single data flow and two-way data binding in vue, and analyze whether Vue's two-way binding and one-way data flow conflict? I hope to be helpful!

As we all know, the one-way data flow state management mode (such as Vuex) is more recommended in Vue, but Vue also supports two-way data binding through v-model. (Learning video sharing: vuejs tutorial)

Then the question is, the concepts of single data flow and two-way data binding, don’t they conflict with each other? Now that v-model can be used for two-way data binding, shouldn't it be a two-way data flow?

This article mainly includes the following content

• One-way bindingvs Two-way binding

• Single One-way data flowvs Two-way data flow

• Why do we say v-model is just syntax sugar

One-way binding<span style="font-size: 18px;">vs</span> Two-way binding

One-way binding, Refers to the mapping relationship between the View layer and the Model layer.

react adopts one-way binding, as shown in the figure:

In React, when When the View layer changes, the user processes it by issuing Actions, and in Actions setState is used to process the State Update, State triggers View update after update. It can be seen that the View layer cannot directly modify the State, it must be operated through Actions, which is more clear and controllable

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

• One-way binding Fixed: Interpolation form {{data}}, v-bind is also one-way binding
• Two-way binding: v-model## of the form #, user changes to the View layer will be synchronized directly to the Model layer

In fact

v-model is just As syntactic sugar for v-bind:value and v-on:input, we can also use one-way binding similar to react. Both have 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 cause data changes to be opaque. The advantages and disadvantages coexist. You can use it according to the situation.

One-way data flowvs<span style="font-size: 18px;"></span> Two-way data flow

Data flow refers to the flow of data between components.

Vue and React are both one-way data flow models, although vue has two-way bindingv-model, but the data transfer between vue and react parent-child components still follows the one-way 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. The child component can only notify the parent component of data changes through events, as shown in the figure:

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

Why do we sayv-model<span style="font-size: 18px;"></span> is just syntactic sugar

You can use the

v-model directive in the form# Create two-way data bindings on the ##<input>, <textarea></textarea>, and <select></select> elements. It automatically chooses the correct method to update the element based on the control type. Although somewhat magical, v-model is essentially just syntactic sugar. It is responsible for listening to user input events to update data, and perform some special processing for some extreme scenarios

As mentioned above,

Vue

The documentation saysv-model Just syntactic sugar<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;input v-model=“phoneInfo.phone”/&gt; //在组件中使用时，实际相当于下面的简写 &lt;input :value=&quot;PhoneInfo.phone&quot; @input=&quot;val =&gt; { PhoneInfo.phone = val }&quot;</pre><div class="contentsignin">Copy after login</div></div>Then the question is, why is

v-model

not a true two-way data flow? According to this principle, can we think that the one-way data flow of model->view is also syntactic sugar, and it is just implemented by the author of vue through a certain method The real reason has been mentioned above.

Data binding is the mapping relationship between

View and Model. Data flow refers to the data flow between components

v-model is not a true two-way data flow because it cannot directly modify the value of the parent component. For example, if you bind props# in v-model The value in ## will report an error, it can only bind the value of the component

, and the real two-way data flow, such as

AngularJs, allows the parent component to be directly updated in the child component Of value, this is why v-model is just syntactic sugar

Summary

In general , One-way and two-way data binding and data flow are two concepts with different dimensions. Data binding is the mapping relationship between

View and Model, and data flow refers to the relationship between components. data flow. 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

##This article Reprinted from: https://juejin.cn/post/7085139499767840782

Author: Programmer Jiang classmate

(Learning video sharing:

web front-end development

, Introduction to Programming)

The above is the detailed content of Understand the single-item data flow and two-way data binding in Vue. Are the two conflicts?. For more information, please follow other related articles on the PHP Chinese website!