Besides using components, mixins are another way to reuse code. A mixin is just a plain JavaScript object that can contain any component options. As suggested by the name mixin, Vue.js mixes a mixin into your Vue components' options objects. In this way, you can write cross-component functionalities.

When a mixin and a component both contain the same options, Vue.js will merge them with different strategies, depending on the value of the option. For example, if a mixin and a component both contain a created() life cycle hook, Vue.js will put both methods into an array and call the mixin's method first. And if they both contain an option that expects object values (for example, methods, components, directives, and filters) Vue.js will merge the options into the same object and the component's option will take priority.

You can apply a mixin locally or globally. This is unlike components, filters, and directives that, even if registered globally, still need to be declaratively used. Once you apply a mixin globally, it will affect every Vue instance created afterward automatically. So, use it with caution.

Let's create a mixin, lifecycle-logger, for inspecting Vue instances' life cycles by defining several hooks that we're interested in.

By convention, we will put the mixin under the mixins directory and name it in this format—${mixinName}.mixin.js.

Let's have a look at the mixins/lifecycle-logger.mixin.js file:

export default { 
  created () {
    console.log(`${this.$options.name} created`);
  },
  beforeMount () {
    console.log(`${this.$options.name} about to mount`);
  },
  mounted () {
    console.log(`${this.$options.name} mounted`);
  }, 
  destroyed () {
    console.log(`${this.$options.name} destroyed`);
  }
};

In each hook function, we will simply log the instance's name and the stage. As you can see, inside the mixin, we can also access the instance via this.$options. The $option is a property of a Vue instance and it references the options object that we use to define a Vue component. So, we can access the component's name using this.$options.name. Let's add the name property to our root Vue instance as well.

Here are the changes to the index.html file:

<script type="module">
  ...
  import lifecyleLogger from './mixins/lifecycle-logger.mixin.js';
  ...
  let vm = new Vue({
    ...
    name: 'MessagesApp',
    mixins: [lifecyleLogger],
    ...
  });
</script>

Here are the changes to the MessageList component:

import lifecyleLogger from '../mixins/lifecycle-logger.mixin.js';
export default {
  name: 'MessageList',
  mixins: [lifecyleLogger],
  ...
};

Here are the changes to the MessageListItem component:

import lifecyleLogger from '../mixins/lifecycle-logger.mixin.js';
export default {
  name: 'MessageListItem',
  mixins: [lifecyleLogger],
  ...
};

If you run the app now, you can see different stages of all of the instances' life cycles. If you have experience with AOP in Java, you might feel that this life cycle mixin looks familiar.

Mixins provide a way of reusing code and, in fact, Vue.js uses mixins heavily to bootstrap the Vue constructor itself. However, it doesn't mean that this could be a good option for your application code since mixins might make your code less readable because mixin options are merged with those of a component, which creates some level of obscurity.