What does mixing in Vue3 mean?

In Vue3, Mixins are a technique for sharing component options among multiple components. Through the mixing mechanism, we can inject some reusable code and functions into multiple components, so as to achieve code reuse and logic sharing. This article will introduce the concept and usage of mixin in Vue3 in detail to help you better understand and apply mixin.

What is a mixin?

A mixin is a technique for merging a set of component options into a target component. In Vue3, we can extend component options by defining a mixin object, and use the option to introduce the mixin object in the target component mixins. When a component uses a mixin, it inherits all the properties and methods of the mixin.

define mixin object

To define a mixin object, we can create a plain JavaScript object and add the component options that need to be shared to this object. For example, let's create a loggerMixinmixin called , which logs to the console:

const loggerMixin = {
  created() {
    console.log('Component created')
  },
  methods: {
    log(message) {
      console.log(message)
    }
  }
}

In the above code, we define an loggerMixinobject, which contains a createdhook function and a logmethod. In createdthe hook function, we output a log to indicate that the component has been created. The method logis used to output custom log information.

import mixin object

In Vue3, we can use mixinsoptions to introduce mixins into components. By adding the mixin object to mixinsthe options array, we can inherit all the properties and methods of the mixin object in the component.

import { defineComponent } from 'vue'

const ComponentA = defineComponent({
  mixins: [loggerMixin],
  created() {
    this.log('Hello, Vue3')
  }
})

In the above code, we defineComponentcreated a ComponentAcomponent called with a function and mixinsintroduced loggerMixinthe mixin object in options. In this way, ComponentAthe component inherits the loggerMixinhook createdfunctions and logmethods.

When ComponentAthe component is created, createdthe hook function will be called and output "Component created" to the console. At the same time, in createdthe hook function, we call logthe method and pass a parameter "Hello, Vue3", which will output the log information in the console.

Resolving mixin naming conflicts

When using mixins, you may encounter mixin naming conflicts. When the mixin and the component itself have the same options, the component options override the mixin's options. For example, if both the component and the mixin have createdhooks, the component's own createdhooks will override the mixin's createdhooks.

To avoid mixin naming conflicts, we can use the options in the mixin object $optionsto access the component itself. In this way, we can extend the component's options without being overridden by the component's options. For example, we can use it in the mixin object this.$options.createdto call the hook function of the component itself created.

const loggerMixin = {
  created() {
    console.log('Mixin created')
  },
  methods: {
    log(message) {
      console.log(message)
    }
  }
}

const ComponentB = defineComponent({
  mixins: [loggerMixin],
  created() {
    this.$options.created.call(this) // 调用组件自身的created钩子函数
    this.log('Hello, Vue3')
  }
})

In the above code, we define a loggerMixinmixin object called , which contains a createdhook function and a logmethod. In createdthe hook function, we output a log indicating that the mixin object was created.

In ComponentBthe component, we introduce loggerMixinthe mixed-in object, createdcall the component's own createdhook function in the hook function, and use logthe method to output log information.

order of mixing in

In Vue3, the merging order of mixed-in objects starts from the last element of the mixed-in array, and merges forward one by one. This means that if multiple mixins have the same options, the options of the later mixins will override the options of the earlier mixins.

For example, we have three mixins, namely mixinA, mixinBand mixinC:

const mixinA = {
  created() {
    console.log('Mixin A created')
  }
}

const mixinB = {
  created() {
    console.log('Mixin B created')
  }
}

const mixinC = {
  created() {
    console.log('Mixin C created')
  }
}

Now, we create a component and mixinsinclude these three mixins in the options:

const ComponentC = defineComponent({
  mixins: [mixinA, mixinB, mixinC],
  created() {
    console.log('Component created')
  }
})

In the above code, ComponentCthe component introduces mixinA, , mixinBand mixinCthree mixins. When ComponentCthe component is created, the console will output "Mixin A created", "Mixin B created", "Mixin C created" and "Component created" in sequence.

This illustrates the order in which mixins are merged, ie from back to front.

Summarize

In this article, we detailed the concept of Mixins in Vue3 and their usage. Through the mixing mechanism, we can inject some reusable code and functions into multiple components to achieve code reuse and logic sharing.

We learned how to define a mixin and how to include a mixin in a component. At the same time, we discussed the method of resolving mixin naming conflicts and the order of mixins.