Für die Migration von Vue 3 auf Vue 2 ist die Option erforderlich, mindestens eine Bibliothek in Vue 3 und Bootstrap-Vue (Vue 2) zu verwenden.

Question

Wir versuchen, eine Bibliothek zu aktualisieren und die neue Version erfordert Vue 3 anstelle von Vue 2, nämlich tinymce-vue. Leider handelt es sich hierbei um ein Unternehmensprojekt, das Bootstrap-vue verwendet, das noch nicht vollständig mit Vue 3 kompatibel ist (Bootstrap-vue3 ist noch nicht produktionsbereit und wir verwenden einige Komponenten, die noch nicht migriert wurden).

Der Hauptversuch besteht darin, die komplette Anwendung auf Vue 3 zu migrieren. Allerdings ist die Verwendung von Bootstrap-Komponenten in Vue 3 nicht zulässig, oder wenn der Kompatibilitätsmodus verwendet wird, funktioniert ein Teil der App, aber die Teile, die diese Komponente erfordern, werden nicht angezeigt/funktionieren, oder andere Teile der Komponente, die Vue 3 erfordern sind kaputt. Gibt es eine Möglichkeit, bibliotheksspezifische Kompatibilität bereitzustellen, oder was ist in diesem Fall der empfohlene Ansatz, wenn zwei Bibliotheken zwei verschiedene Versionen von Vue in derselben Komponente erfordern?

Ich bin mir nicht sicher, ob diese Frage anders gestellt werden sollte. Dies ist meine erste Frage in StackOverflow. Wenn ich sie also umformulieren oder weitere Details angeben muss, lassen Sie es mich bitte wissen.

Answer 1

问题在于，Vue 2 和 3 应用程序很难甚至不可能在同一个项目中共存，因为它们依赖于同名但不同版本的 vue 包。即使可以使用不同名称的 vue 包别名或使用模块化 Vue（import Vue from 'vue'）作为一个版本和 Vue CDN (window. Vue）对于第一方代码中的另一个版本，另一个需要解决的问题是Vue库需要使用特定的Vue版本。

这需要使用其首选的 Vue 版本和库来构建和捆绑子应用程序，这与微前端应用程序的概念非常接近。

假设有一个 Vue 3 子应用程序使用 Vue 3 特定库 (tinymce-vue)，并专门编写用于公开所有公共 API 以与外界通信：

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;

Vue 2 包装组件充当 Vue 3 子应用程序和 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();
  },
};

如果包装器和子应用程序需要根据特定点进行额外同步，例如provide/inject、模板引用等，这个需要具体实现。在这一点上，它与 Vue 3->Vue 2 适配器或涉及其他框架（Angular、React）的适配器没有什么不同。