Migration von Vue2 zu Vue3 – So aktualisieren Sie Mixins, die in Vue2-Komponenten in der Setup-API von Vue3 hinzugefügt wurden.

Question

Vor kurzem haben wir mit der Migration unserer Anwendung von Vue2 nach Vue3 begonnen und einigen Komponenten wurden Mixins hinzugefügt. Ich würde gerne wissen, wie man diese Mixins in Vue3 hinzufügt.

Ich habe mehrere Lösungen ausprobiert, aber keine spezielle Lösung gefunden, die „export default { name: „Modal“, Components: { Loader }, mixins: [] }“ im Vue2-Hook entspricht. Wie füge ich ein Mixin hinzu?

Answer 1

在Vue 3中，当使用Options API时，您仍然可以以类似于Vue 2的方式使用混入。

const mixin = {
  created() { console.log('Mixin'); },
};

export default {
  name: "Modal",
  components: { Loader },
  mixins: [mixin]
};

但是对于Composition API，您必须使用可组合函数来替代混入：

// Composable declaration function
import { onMounted } from 'vue';

export function useMixin() {
  onMounted(() => console.log('Mixin'));
  return {};
}

// In your component
import { useMixin } from './mixin';
import Loader from './Loader';

export default {
  name: "Modal",
  components: { Loader },
  setup() {
    useMixin();
    return {};
  },
};

可组合函数在使用Vue 3的Composition API时，相比混入提供了更明确和灵活的替代方案。