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]

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.

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.

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

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!