Propriété mixins de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue.js,mixinsest un moyen flexible de distribuer des fonctionnalités réutilisables dans les composants Vue. Grâce àmixinsvous pouvez encapsuler ensemble des options, de la logique ou des hooks de cycle de vie partagés par plusieurs composants, puis intégrer ces fonctionnalités dans les composants qui en ont besoin. Cela évite la duplication de code et améliore la maintenabilité du code.

Dans Vue 3,mixinsest encore un outil très utile. Bien que la Composition API offre une manière plus flexible de réutiliser des fonctionnalités,mixinsreste un choix simple et efficace dans certains scénarios.

Comment utiliser les mixins ?

1. Créer un mixin

Tout d'abord, vous devez créer unmixinobjet. Cet objet peut contenirdata、methods、computed、watchainsi que des options comme les hooks de cycle de vie.

Exemple

// 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('Hook monté depuis mixin');
  }
};

2. Utiliser un mixin dans les composants

Ensuite, vous pouvez utiliser l'mixinsoption dans le composant pour introduire cemixin。

Exemple

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Cliquez-moi</button>
  </div>
</template>

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

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

Dans cet exemple,myMixinles ... dansdata、methodsetmountedles hooks seront fusionnés dans le composant.

Règles de fusion pour les mixins

1. fusion des données

Simixinà la fois le mixin et le composant ontdatafonctions, Vue fusionnera les deuxdatavaleurs de retour de fonction viaObject.assignfusion. Si les noms de propriétés entrent en conflit, ceux du composantdataremplaceront ceux dumixindedata。

Exemple

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

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

// résultat final
data() {
  return {
    message: 'Hello from component' // les données du composant remplacent les données du mixin
  };
}

2. Fusion des hooks de cycle de vie

Simixinle mixin et le composant ont tous les deux le même hook de cycle de vie (p. ex.mounted), Vue les fusionnera dans un tableau et les exécutera dans l'ordre demixinavec le mixin exécuté avant le composant.

Exemple

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

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

// ordre d'exécution
// Monté depuis le mixin
// Monté depuis le composant

3. Fusion des methods et computed

methodsetcomputedLes règles de fusion pour methods et computed sont les mêmes quedatacelles pour data. Si les noms de methods ou les noms de propriétés computed entrent en conflit, les methods ou propriétés computed du composant remplacerontmixincelles du

Limites des mixins

Bien quemixinsest très puissant, il présente aussi certaines limites :

  1. Conflits de nommage: Si plusieursmixinsou composants ont les mêmes noms de propriété ou de méthode, cela peut entraîner un comportement de redéfinition inattendu.
  2. Dépendances implicites：mixinsLa logique dans le mixin peut dépendre de certains états ou méthodes du composant. Cette dépendance n'est pas suffisamment explicite et peut rendre le code difficile à maintenir.
  3. Mixin global: Si un mixin global est utilisé,mixinil affectera toutes les instances de Vue, ce qui peut entraîner des effets de bord imprévus.

Alternative : API de composition

Dans Vue 3, l'API de composition offre une manière plus flexible de réutiliser la logique. Grâce àreactive、refet personnaliséshook, vous pouvez encapsuler la logique dans des fonctions réutilisables au lieu de la mélanger dans les composants.

Exemple

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

export function useMixin() {
  const mixinData = ref('Ces données proviennent de la Composition API');

  function mixinMethod() {
    console.log('Cette méthode provient de la Composition API');
  }

  onMounted(() => {
    console.log('Hook monté de la Composition API');
  });

  return {
    mixinData,
    mixinMethod
  };
}

Ensuite, utilisez-le dans le composant :

Exemple

<template>
  <div>
    <p>{{ mixinData }}</p>
    <button @click="mixinMethod">Cliquez-moi</button>
  </div>
</template>

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

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

Vue3 选项式 APIVue3 API des options

Autres extensions