preface

Mixins are a common way to extract code logic from the VUe2. x Options API, and can be used in vue3.x as well.

While useful, it still has some significant drawbacks, while Vue3. X introduces custom hooks in the Composition API

This article will briefly compare and contrast the two implementations.

What are mixins?

As we develop components, we often come across components that share the same logic and functionality.

Writing a set of methods for each component would lead to code redundancy, and it would be a waste of time and energy to make changes one by one.

Mixins are a way to separate multiple components from the same logic, so that each component can write code once and benefit from multiple components.

How are mixins used?

Basic usage steps: 1. Use a JS file to extract the script part of vue, as shown below (optional)

export default { data(){ return {} }, methods:{}, computed:{}, filters:{}, created(){}, Mounted (){console.log(" I am a mixins"); }}Copy the code

2. Introduce the components that need to be introduced into mixins:

Some features of Mixins:

1. The life cycle in a mixins is called in conjunction with the life cycle of the component that introduced the mixins

2. The component’s data, methods, filters override the mixins’ data, methods, filters of the same name.

The data of the component will override the same name of the mixins and the methods of the data component will override the same name of the mixins and the filters of the methods component will override the same name of the mixins even though they're components that have the same logic, But by no means is every component 100% the same, with different properties or methods or filters. So if there is no data/methods/filters in the component... Data /methods/filters in mixins are automatically inherited... . Data /methods/filters as defined in the component... Shall prevail.Copy the code

3. The method with the same name in different mixins shall be overwritten by the last one in the order of introduction.

For example, mixin1.js and mixin2.js both have the same method: test() and we introduce it in the order of [mixin1,mixin2], then the final method is mixin2's test().Copy the code

Disadvantages of Mixins:

1. Variable sources are not clear (implicitly passed in), which is not conducive to reading and makes the code difficult to maintain.

Components can introduce multiple mixins and implicitly call variables/methods from mixins, which sometimes leads to confusion as to which mixins these variables/methods belong to.Copy the code

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

For example, if the method in component 1 outputs the property info, but component 2 overwrites the property INFO in component 1, then executing the method in component 1 outputs the property in component 2. This can be avoided, but if you are not careful, it can lead to conflicts and confusion.Copy the code

3. Mixins and components may have a many-to-many relationship with high complexity (that is, one component can reference multiple mixins, and one mixins can also be referenced by multiple components).

Note: VUE3’s Composition API aims to address these issues. The shortcomings of mixins are one of the main drivers behind the Composition API, which was inspired by React Hooks.

What are custom hook functions in Vue3. X?

  • Reusable functional functions encapsulated using Vue3’s composite API

  • Custom hooks function similar to the mixin technology in VUe2

  • The advantage of custom hooks: it is clear where the reusable functional code is coming from and easier to understand

The differences between Mixins and Composition API hooks:

A simple counter is used as an example to illustrate the difference between writing and using Options API mixins and Composition API custom hooks.