Can vue's mix-in use life cycle?

Vue’s mix-in can use the life cycle. The life cycle in mixins will be called together with the life cycle of the component that introduces mixins, and the life cycle functions in mixins will be called faster than the component that introduces mixins. It should be noted that the life cycles of multiple mixins will be merged and run together, but properties and methods with the same name cannot be merged, which may cause conflicts or overwrites.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Basic introduction to mixins

During the development process, we will encounter some components with the same logic and functions. We will not add them in every component. Write one set of code, which will lead to code redundancy.

The function of mixins is to extract the same logic and functions and divide them into single files. Components only need to introduce mixins to achieve the same functions.

Using mixins

also creates the mixins folder in the src folder and writes the corresponding mixin.js file in it. As shown below:

Use a js file to extract the script part of vue, as shown below:

  data(){
    return {}
  },
  methods:{},
  computed:{},
  filters:{},  created(){},  mounted(){
    console.log("我是mixins");
  }
}复制代码

We can introduce it in the component mixin, use the following:

Mixin characteristics

1. The life cycle in mixins will be the same as The life cycle of components that introduce mixins is integrated and called together, and the life cycle functions in mixins will be faster than the components that introduce mixins. [Related recommendations: vuejs video tutorial, web front-end development]

2. The data, methods, and filters of the component will overwrite the data, methods, and filters of the same name in the mixins.

3. Methods with the same name in different mixins should be overwritten in the order of introduction. The previous method of the same name.

Disadvantages of mixin

1. The source of the variables is unclear (implicitly passed in), which is not conducive to reading and makes the code difficult to maintain.

You can introduce multiple mixins into a component and directly and implicitly call the variables/methods in the mixin. This will sometimes make us confused and unable to distinguish these variables and methods. Which mixin do they belong to?

2. The life cycles of multiple mixins will be merged and run together, but properties and methods with the same name cannot be merged, which may cause conflicts or overwrites.

For example, the method in component 1 should output the attribute info,

But component 2 also has the attribute info with the same name, and overwrites the attribute info in component 1,
Then when executing component 1 In the method, the output is indeed the attribute in component 2.
We can avoid this, but if we are not careful, it will cause conflicts and it is easy to create confusion.

3. There may be a many-to-many relationship between mixins and components, and the complexity is high

That is, one component can reference multiple mixins, and one mixins can also be referenced by multiple mixins. component reference.

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Can vue's mix-in use life cycle?. For more information, please follow other related articles on the PHP Chinese website!