A deep understanding of the principles of Vue one-way data streams and a deep understanding of vue data streams

A deep understanding of the principles of Vue one-way data streams and a deep understanding of vue data streams

What is one-way data stream?

One-way data streams can only modify the status in one direction. It is a simple example of unidirectional data streams:

Simple diagram of one-way data stream

A unidirectional data stream corresponds to a bidirectional data stream (also called bidirectional binding ). In two-way data streams, you can modify the state of a Model (a set that can be understood as a set of States), or modify the state of a user's operations (such as entering content in the input box. This makes it difficult to predict what the final state is. This makes it difficult to debug the code. As shown in:

Compared with bidirectional data streams, In unidirectional data streams, when you need to modify the status, you can start a new modification process. This limits the way the status is modified, making the status predictable and easy to debug.

Use Cases of unidirectional data streams

When multiple components share the status, it is not easy to communicate between the shared status and the components (sibling components. We extract the sharing status, and it is easy to use one-way data stream.

Start with v-model

1. v-model is used on the input element.

When using v-model, it is similar to two-way binding (in fact, it is also ...), However, Vue is a single data stream, and v-model is just a syntactic SUGAR:

<input v-model="something" /><input v-bind:value="something" v-on:input="something = $event.target.value" />

The first line of code is actually just the syntax sugar of the second line. Then the second line of code can be abbreviated as this:

<input :value="something" @input="something = $event.target.value" />

To understand this line of code, you first need to know that the input element itself has an oninput event, which is newly added to HTML5, similar to onchange. When the content of the input box changes, oninput is triggered, use $ event to pass the latest value to something.

We carefully observe the two lines of code: the syntactic sugar and the original syntax. We can draw a conclusion: when adding the v-model attribute to the input element, the value is used as the element attribute by default, then, the 'input' event is used as the trigger event for real-time value passing.

2. v-model is used on components.

V-model can be used not only on input but also on components. You can view the demo on the official website.

<Currency-input v-model = "price"> </currency-input> Vue. component ('currency-input', {template: '\ <span >\\ \ <input \ ref = "input" \ v-bind: value = "value" \ v-on: input = "updatevalue(event.tar get. value) "\>\</span> \', props: ['value'], // Why is the value attribute used here? Where is the value defined? Methods: {// This method is not used to directly update the value, but to format the input value and limit the number of BITs updateValue: function (value) {var formattedValue = value // Delete space characters on both sides. trim () // retain 2 decimal places. slice (0, value. indexOf ('. ') =-1? Value. length: value. indexOf ('.') + 3) // if the value is not compliant, manually overwrite the value if (formattedValue! = Value) {this. $ refs. input. value = formattedValue} // bring the value through the input event // <! -- Why is 'input' used as the event name to trigger the event? Where is the 'input' defined? --> This. $ emit ('input', Number (formattedValue ))}}})

If you know the answer to these two questions, congratulations! You have mastered v-model. If you do not understand, you can refer to this Code:

<Currency-input v-model = "price"> </currency-input> when used in a component, it is equivalent to the following abbreviation: // The upstream code is the downstream syntactic sugar <currency-input: value = "price" @ input = "price = arguments [0]"> </currency-input>

Therefore, when the v-model attribute is added to a component, the value is used as the component property by default, and the 'input' value is used as the event name when the component is bound to an event. This is particularly useful when writing components.

3. Disadvantages and Solutions of v-model

When creating common components such as check boxes or single-tenant, v-model is not easy to use.

<input type="checkbox" v-model="something" />

V-model provides the value Attribute and oninput event for us. However, what we need is not the value attribute but the checked attribute, and the oninput event is not triggered when you click this single commit event, it only triggers the onchange event.

Because the v-model only uses the input element, this is a good solution:

<input type="checkbox" :checked="value" @change="change(value, $event)"

When v-model uses components:

<Checkbox v-model = "value"> </checkbox> Vue. component ('checkbox', {tempalte: '<input type = "checkbox" @ change = "change": checked = "currentValue"/> 'props: ['value'], data: function () {return {// Why is a local variable defined here and initialized with the value of prop. CurrentValue: this. value };}, methods: {change: function ($ event) {this. currentValue = export event.tar get. checked; this. $ emit ('input', this. currentValue );}})

In Vue 2.2, you can use the model option to customize prop/event when defining components.

4. vue component data stream

From the analysis of v-model above, we can understand that two-way Data Binding adds a change (input) event to an input element (such as input and textare) based on one-way binding, to dynamically modify the model and view, that is, by triggering the ($ emit) parent component event to modify the mv to achieve the mvvm effect. The data transmitted between vue components is unidirectional, that is, data is always transmitted from the parent component to the child component, and the child component can have its own data internally, however, it does not have the right to modify the data that the parent component passes to it. When the developer tries to do so, the vue will report an error. This is to better decouple components. In development, multiple child components may depend on a data of the parent component. If the child component can modify the data of the parent component, if a child component changes, all child components dependent on the Data Change. Therefore, vue does not recommend the child component to modify the data of the parent component. If you modify props directly, a warning is thrown. The flowchart is as follows:

Therefore, when you want to modify props as a child component, use this child component as a parent component.

1. Define a local variable and initialize it with the value of prop.
2. Define a computing attribute, process the value of prop and return it.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.