Vue3 mixins Property

Vue3 选项式 APIVue3 Options API

In Vue.js,mixinsis a flexible way to distribute reusable functionality in Vue components. Throughmixins, you can encapsulate options, logic, or lifecycle hooks shared by multiple components together, and then mix these features into the components that need them. This avoids code duplication and improves code maintainability.

In Vue 3,mixinsis still a very useful tool. Although the Composition API provides a more flexible way to reuse functionality,mixinsis still a simple and effective choice in some scenarios.

How to use mixins?

1. Create a mixin

First, you need to create amixinobject. This object can containdata、methods、computed、watchas well as options like lifecycle hooks.

Example

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'This data is from mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('This method is from mixin');
    }
  },
  mounted() {
    console.log('Mounted hook from mixin');
  }
};

2. Use mixin in components

Next, you can use themixinsoption in the component to introduce thismixin。

Example

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Click me</button>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin]
};
</script>

In this example,myMixinthe ... indata、methodsandmountedhooks will be mixed into the component.

Merge rules for mixins

1. data merging

Ifmixinboth the mixin and the component havedatafunctions, Vue will merge the twodatafunction return values viaObject.assignmerge. If property names conflict, the component'sdatawill override themixinofdata。

Example

// mixin
data() {
  return {
    message: 'Hello from mixin'
  };
}

// component
data() {
  return {
    message: 'Hello from component'
  };
}

// final result
data() {
  return {
    message: 'Hello from component' // component data overrides mixin data
  };
}

2. Lifecycle hook merging

Ifmixinboth the mixin and the component have the same lifecycle hook (e.g.mounted), Vue will merge them into an array and execute them in the order ofmixinwith the mixin executed before the component.

Example

// mixin
mounted() {
  console.log('Mounted from mixin');
}

// component
mounted() {
  console.log('Mounted from component');
}

// execution order
// Mounted from mixin
// Mounted from component

3. methods and computed merging

methodsandcomputedThe merge rules for methods and computed are the same asdatathose for data. If method names or computed property names conflict, the component's methods or computed properties will overridemixinthose in the

Limitations of mixins

Althoughmixinsis very powerful, it also has some limitations:

  1. Naming conflicts: If multiplemixinsor components have the same property or method names, it may cause unexpected overriding behavior.
  2. Implicit dependencies：mixinsThe logic in the mixin may depend on certain state or methods of the component. This dependency is not explicit enough and may make the code difficult to maintain.
  3. Global mixin: If a global mixin is used,mixinit will affect all Vue instances, which may lead to unforeseen side effects.

Alternative: Composition API

In Vue 3, the Composition API provides a more flexible way to reuse logic. Throughreactive、refand customhook, you can encapsulate logic into reusable functions instead of mixing it into components.

Example

// useMixin.js
import { ref, onMounted } from 'vue';

export function useMixin() {
  const mixinData = ref('This data is from Composition API');

  function mixinMethod() {
    console.log('This method is from Composition API');
  }

  onMounted(() => {
    console.log('Mounted hook from Composition API');
  });

  return {
    mixinData,
    mixinMethod
  };
}

Then use it in the component:

Example

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Click me</button>
  </div>
</template>

<script>
import { useMixin } from './useMixin';

export default {
  setup() {
    const { mixinData, mixinMethod } = useMixin();
    return {
      mixinData,
      mixinMethod
    };
  }
};
</script>

Vue3 选项式 APIVue3 Options API

Other extensions