La migration de Vue 3 vers Vue 2 nécessite la possibilité d'utiliser au moins une bibliothèque dans Vue 3 et bootstrap-vue (Vue 2) ?

Question

Nous essayons de mettre à jour une bibliothèque et la nouvelle version nécessite Vue 3 au lieu de Vue 2, à savoir tinymce-vue. Malheureusement, il s'agit d'un projet d'entreprise utilisant bootstrap-vue, qui n'est pas encore totalement compatible avec Vue 3 (bootstrap-vue3 n'est pas encore prêt pour la production et nous utilisons certains composants qui n'ont pas encore été migrés).

La tentative principale est de migrer l'application complète vers Vue 3. Cependant, il ne permet pas d'utiliser les composants Bootstrap dans Vue 3, ou si vous utilisez le mode de compatibilité, une partie de l'application fonctionne, mais les parties qui nécessitent ce composant n'apparaissent pas/ne fonctionnent pas, ou d'autres parties du composant qui nécessitent Vue 3. sont brisé. Existe-t-il un moyen d'assurer une compatibilité spécifique à la bibliothèque, ou dans ce cas, quelle est l'approche recommandée lorsque deux bibliothèques nécessitent deux versions différentes de Vue dans le même composant ?

Je ne sais pas si cette question doit être posée différemment, c'est ma première question dans StackOverflow, donc si je dois la reformuler ou fournir plus de détails, veuillez me le faire savoir.

Answer 1

Le problème est qu'il est difficile voire impossible que les applications Vue 2 et 3 cohabitent dans un même projet car elles dépendent du même nom mais de versions différentes vue 包。即使可以使用不同名称的 vue 包别名或使用模块化 Vue（import Vue from 'vue'）作为一个版本和 Vue CDN (window. Vue) Pour une version en code 1ère partie, un autre problème à résoudre C'est le Bibliothèque Vue qui nécessite l'utilisation d'une version spécifique de Vue.

Cela nécessite de créer et de regrouper la sous-application en utilisant sa version et sa bibliothèque Vue préférées, ce qui est très proche du concept d'application micro-frontend.

Supposons que vous disposiez d'une sous-application Vue 3 qui utilise une bibliothèque spécifique à Vue 3 (tinymce-vue) et est écrite spécifiquement pour exposer toutes les API publiques afin de communiquer avec le monde extérieur :

let MyV3Comp = {
  template: `<div>{{ myV3Prop }} {{ myV3Data }}</div`,
  props: ['myV3Prop'],
  emits: ['myV3Event'],
  setup(props, ctx) {
    const myV3Data = ref(1);
    const myV3Method = () => {};

    ctx.emit('myV3Event', Math.random());

    // Component public api needs to be exposed to be available on mount() instance
    ctx.expose({ myV3Data, myV3Method });

    return { myV3Data, myV3Method }

  },
};

// Sub-app entry point
let createMyV3App = initialProps => createApp(MyV3Comp, initialProps);
export default createMyV3App;

Les composants wrapper de Vue 2 agissent comme un pont entre les sous-applications Vue 3 et le reste de l'application Vue 2 :

import createMyV3App from '.../my-v3-app-bundled';

let MyV2WrapperComp = {
  template: `<div ref="v3AppWrapper"></div>`,
  props: ['myV2Prop'],
  emits: ['myV2Event'],
  data() {
    return { myV2Data: null };
  },
  methods: {
    // Sync wrapper events
    onMyV3Event(v) {
      this.$emit('myV2Event', v);
    }
  },
  watch: {
    // Sync wrapper props and data
    myV2Data(v) {
      this.v3AppCompInstance.myV3Data.value = v;
    },
    myV2Prop(v) {
      // Hacky! Better use data and methods from public api to pass info downwards
      this.v3AppCompInstance._instance.props.myV3Prop = v;
    },
  },
  mounted() {
    // Vue 3 automatically translates onMyV3Event prop as myV3Event event listener
    // Initial prop values make app props reactive
    // and allow to be changed through _instance.props
    this.v3App = createMyV3App({ onMyV3Event: this.onMyV3Event, myV3Prop: null });

    // also available as undocumented this.v3App._instance.proxy
    this.v3AppCompInstance = this.v3App.mount(this.$refs.v3AppWrapper);

    // Sync wrapper data
    // Hacky! Better use event from public api to pass info upwards
    this.v3AppCompInstance._instance.proxy.$watch('myV3Data', v => this.myV2Data = v);
  },
  unmounted() {
    this.v3App.unmount();
  },
};

Si les wrappers et sous-applications nécessitent une synchronisation supplémentaire basée sur des points spécifiques, tels que provide/inject, des références de modèles, etc., cela doit être implémenté concrètement. À cet égard, ce n'est pas différent de l'adaptateur Vue 3->Vue 2 ou des adaptateurs impliquant d'autres frameworks (Angular, React).