One-way data flow principle
Single data stream scenarios:
```
多个组件会共享状态时，共享状态和组件间（兄弟组件）通信变的不容易。我们把共享状态抽取出来，用单向数据流的方式会变得容易。
```
Data flow, data flow is indicated, is the data transfer with white words. Then individual data is our single direction data transmission. For Vue, the data transfer between the assembly has such a characteristic way data flow.
For the first Sons assembly, the assembly is always to pass data to the parent sub-assembly through Props.
All prop prop father and son are formed between such a unidirectional downlink binding: parent
prop updates may flow down to the subassembly, but not vice versa. This will prevent changes from the parent component sub-assemblies unexpected state, resulting in your application data flow difficult to understand.
Additional, each time the parent is updated components, subassemblies, all the prop will have refreshed as
the latest value. This means that you should not change prop within a subassembly. If you do this, Vue will issue a warning in the browser console.
Props for changing the value in a case where there are two data sub-assembly, and the need to modify the subassembly, in this case, a better definition of this local data property and prop as its initial value.
Two-way data binding
When we use the front end development * MV mode, M - model, it refers to a model, i.e. data, V - view, refers to the view, which is part of the page to show. In general, we need to write code, the data acquired from the server "rendered" to show to the view. Whenever there is a change of data, we will once again rendered to update the view so that view is consistent with the data. That is:
on the other hand, the page will be through the user's interaction, resulting in the state, the data changes, this time, we are writing code, the view updates to the data synchronized to the data so that synchronization to the backend server. That is:
Two-way data binding refers to a binding between the pure view data layer.
One-way and two-way data flow data binding and Differences
For non-UI controls, the absence of two-way, one-way only. UI controls only have a two-way problem. Binding data streams are unidirectional such that unidirectional, which is for complex applications unified state management (e.g. Vuex) premise. Way binding on some occasions require real-time response will be very convenient to user input (such as form submission). But this convenience is generally considered inferior to introduce the advantages brought by the state management of complex applications.
For the v-model Vue is, he is a syntactic sugar, using the bind syntax event to achieve the binding between the data and the view.
v-model to be understood that such code below (not exactly)
It is essentially a one-way flow of data in the event the user add operation to achieve two-way data binding.
After the clear realization of the principle of two-way binding, you can see the difference between the two-way binding is only tied with two-way bind the data change operation hidden inside the frame, the caller will not be directly perceived.
Way binding accordingly make the data flow is one-way, but in practice the way data Vuex stream, but is in fact engaged in a global singleton event dispatcher (dispatcher), the developer must explicitly by doing this unified data change notification event mechanism. In fact, in this way with the two-way binding framework for UI controls it is the same way. All events underlying mechanisms. Imagine, assuming that the application of two-way binding, we have an event listener or watcher way to modify the data frame automatically bound to UI controls, and then add logic similar dispatcher, changes in the state behind the two-way binding as we can manage and you can only enjoy one-way stream of income data.
Way data flow and two-way data binding What are the advantages and disadvantages? Way data flow advantages and disadvantages
advantage:
State may change all records, tracks, easily traceable source;
all data is only one, there is only one data component inlet and outlet, so that more intuitive and easier to understand the program, facilitate maintainability application;
Once the data changes, it to update the page (data- page), but not (page -data);
if the user makes changes on the page, then manually collected (two-way automatic), incorporated into the original data.
Disadvantages:
HTML code is rendered, can not be changed, there is new data, you have to put the old HTML code is removed, the integration of new data and templates to re-render;
the amount of code increases and a data transfer process becomes longer, a lot like the boilerplate code;
the same time as the application status independent management of stringent requirements (single, global store), when dealing with more localized state of the scene (such as user input to interact more "rich form" applications), will seem long-winded and tedious.
Two-way data binding strengths and weaknesses:
advantage:
User changes will be on view automatically sync to the data model to changes in the value of data synchronization model would immediately go to the view;
without those related operations and one-way data binding;
in the form of more interactive scenes next, it will simplify the large number of independent business code.
Cons:
Unable to track changes in the local state;
"black box operation", increasing the difficulty of debug when an error occurs;
due to component data changes may become the source of more than one entry, data flow direction easily disorder, if more lack of "control" means, vaginal bleeding.
It can be seen, with one-way binding on the two-way binding function is essentially complementary, so we can use the appropriate means at the appropriate scene. For example, in UI controls (usually the class form action), I will use two-way data binding way; while other scenes are unified one-way + inline event (<component: msg = "msg" @ update = "updateMsg (msg ) to build applications ">) way.