vue Since it is a one-way data flow, but also MVVM framework, then, between which there is no conflict.
Unidirectional data flow
Way data flow refers to the state can only be modified from one direction.
state: the data source drive applications. view: declaratively state is mapped to the view. actions: in response to user input on the view state variations.
Way data flow process:
Simple way data flow (unidirectional data flow) refers to a user access View, View Action issued user interaction, to update the corresponding state in the Action. After the state will trigger the update process View update page. Such one-way data flows always clear, easy to maintain and can be predicted.
Features:
(1) change the state of all recordable, traceable, easily traceable source;
(2) only one copy of all data, there is only one data component inlet and outlet, so that the program more intuitive and easier to understand, conducive to the application maintainability ;
(3) Once the data changes, go to the update page (data- page), but not (page -data);
(4) If the user makes changes on the page, then manually collected (two-way automatic), merger to the original data.
Data flow between the individual components:
Data parent components props can flow into the subassembly, and when the data is changed parent components, the sub-assembly will automatically receive this modified data and updates the page.
Therefore, data is typically provided by the parent component, when the data parent components has changed, the sub-assembly will automatically receive the change data, thereby updating the subassembly.
But not vice versa, this change will prevent the parent from the component sub-assemblies unexpected state, resulting in your application data flow difficult to understand.
Each time the parent is updated components, sub-assemblies are all the prop will refresh to 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.
note:
1, data flows from a parent component (transmitted) to the sub-assembly, only one-way binding.
2, data transfer should not be modified over the parent element within the subassembly.
advantage:
1. The state may change all records, tracks, easily traceable source;
2. only one copy of all data, there is only one data component inlet and outlet, so that more intuitive and easier to understand the program, facilitate maintainability application;
3 Once the data changes, go to the update page (data- page), but not (page -data);
4. 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.
vue two-way binding
MVVM is to achieve a frame, mainly composed of three parts in the Vue, View, and the ViewModel Model, where Model View and can not communicate directly, they have to be performed by the middleware ViewModel. For example, when the data changes Model section, since vue Data Binding in the underlying data layer and is bound to Dom, the ViewModel View layer update notification view; View view when a change in the data is also synchronized to the Model. Synchronization is completely automatic, manual operation without human DOM between View and Model.
Advantages :
1. A user views the modifications are automatically synchronized to the data model, the change in value would immediately synchronized to the data model to view;
those related operations and the need for 2-way data binding;
3. under a form more interactive scene, a large number of independent business will simplify the code.
Disadvantages:
1. not track changes in the local state;
2. "secret operations", increasing the difficulty of debug when an error occurs;
4. Since the component data entry becomes possible to change more than one source, the data flow direction of the easy disorders, lack if more "control" means, metrorrhagia.
vue Since it is a one-way data flow, but also MVVM framework, then there is no conflict between these?
I.e., the two are not mutually exclusive, the overall flow of data in the single use, easy to trace; locality bidirectional data flow, easy to operate.
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.
