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

The main content of this article is to explain "what is the mixed use of mixin in vue3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the mixed use of vue3's mixin?"

Vue 2 uses alternative API such as data, methods, watch, computed and lifecycle hook functions.

Mixin blending provides a very flexible way to distribute reusable functions in vue components. A mixin object can contain any component options, and when a component uses a mixin object, all mixin object options are mixed into the component's own options.

1. How to use mixin?

Generally speaking, the mixin object extracts the common options of some components, such as data in data, methods, calculation properties, and lifecycle hook functions, and then introduces them into the component, which can be merged with the options of the component itself.

Example 1:

Const myMixin = {data () {return {num:520}}, mounted () {console.log ('mixin mounted');}} export default {mixins: [myMixin],}

It is equivalent to:

Export default {data () {return {num:520}}, mounted () {console.log ('mixin mounted');}}

The advantage of this is that multiple component common options can be extracted into a mixin object, which can be introduced directly when needed.

Pay attention to the use of mixin

Mixin contains options, and components can also contain these options. What if some of the options included in mixin have the same properties? For example, what if there is a method with the same name in both mixin and component? Or when they all contain lifecycle hook functions, who is the order in which they are executed? Next, let's take a look at what you should pay attention to when using mixin.

2.1.When using the mixin object, the internal components and the mixin contain the same options, what should I do?

Both the sample 2:mixin object and the instance contain the data option, with two different variables inside

{{qdr}}-{{name}} const myMixin = {data () {return {name:' loves the front-end sister'}} export default {mixins: [myMixin], data () {return {qdr: "front-end person"}

After running, we find that both variables can be used, and the data in the mixin object is merged with the data option in the instance. The same is true for methods and computed.

What if we change the two variables in the previous example to the same name?

What if the mixin object options used and the options in the instance have the same properties?

The sample 3:data has the same variable name name

{{name}} const myMixin = {data () {return {name:' loves the front end sister'} export default {mixins: [myMixin], data () {return {name: "front end person"}

As a result, the name value is "front-end person".

When the attribute value is the same, the nearest principle is selected and the value in the instance is inherited first, so the property of the mixin object is overridden by the property in the instance.

2.3.The mixin object can also add lifecycle hook functions.

What is the priority execution of the mixin and the example?

Example 4:mixin adds a lifecycle hook function, taking mounted as an example

Const myMixin = {mounted () {console.log ('mixin mounted');}} export default {mixins: [myMixin], mounted () {console.log (' mounted');}}

Running result:

We found that lifecycle functions will be executed together, preferentially in mixin, and then in the instance.

III. Mixin Custom attributes

Options is used for initialization options for the current component instance, which is useful when you need to include a custom property in the option.

In a nutshell, $options is used to invoke the mixin custom property in the instance.

Example 5: add a custom attribute

Const myMixin = {custom:' custom attribute'} is used in the instance: mounted () {console.log (this.$options.custom);}

What does the priority do if a custom property with the same name is included in the instance? What if we want to control the priority?

IV. Merger strategy

OptionMergeStrategies option merge strategy, when using mixin custom properties and properties in the instance conflict, use optionMergeStrategies to define the merge rules, that is, the question of who should be used first.

Usage rules:

App.config.optionMergeStrategies.propertyName= (mixinVal,appVal) = > {return appVal | | mixinVal / / determine which attribute value to return first}

According to example 5 above, add the custom attribute to the instance and run to view the result.

Example 6: verify mixin and instance property priority

Const myMixin = {custom:'mixin custom',} export default {custom:'app custom', mixins: [myMixin], mounted () {console.log (this.$options.custom); / / print result: app custom}}

It is found that the property value in the mixin object is overridden by the property value in the instance. We can borrow the above optionMergeStrategies property to modify the merge rules of custom.

Introduce into the main.js file:

App.config.optionMergeStrategies.custom= (mixinVal,appVal) = > {return mixinVal | | appVal}

After running it again, we find that the print result has become the property value in mixin:

Console.log (this.$options.custom); / / print result: mixin custom 5. Global configuration mixin

If there are multiple components in the project that reuse certain options, we can use the mixin object globally. Multiple mixin objects can also be introduced into an instance.

The syntax is as follows:

App.mixin ([{}, {}, {}]) at this point, I believe you have a deeper understanding of "what is the mixed use of mixin in vue3". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.