Memindahkan Vue 3 ke Vue 2 memerlukan pilihan untuk menggunakan sekurang-kurangnya satu perpustakaan dalam Vue 3 dan bootstrap-vue (Vue 2)?

Question

Kami cuba mengemas kini perpustakaan dan versi baharu memerlukan Vue 3 dan bukannya Vue 2, iaitu tinymce-vue. Malangnya, ini adalah projek syarikat yang menggunakan bootstrap-vue, yang masih belum serasi sepenuhnya dengan Vue 3 (bootstrap-vue3 masih belum siap pengeluaran dan kami menggunakan beberapa komponen yang belum dipindahkan lagi).

Percubaan utama adalah untuk memindahkan aplikasi lengkap ke Vue 3. Walau bagaimanapun, ia tidak membenarkan penggunaan komponen Bootstrap dalam Vue 3, atau jika menggunakan mod keserasian, sebahagian daripada apl berfungsi, tetapi bahagian yang memerlukan komponen itu tidak muncul/berfungsi atau bahagian lain komponen yang memerlukan Vue 3 rosak. Adakah terdapat sebarang cara untuk menyediakan keserasian khusus perpustakaan, atau dalam kes ini, apakah pendekatan yang disyorkan apabila dua perpustakaan memerlukan dua versi Vue yang berbeza dalam komponen yang sama?

Saya tidak pasti sama ada soalan ini perlu ditanya secara berbeza, ini ialah soalan pertama saya dalam StackOverflow, jadi jika saya perlu menguraikannya semula atau memberikan butiran lanjut, sila beritahu saya.

Answer 1

Masalahnya ialah sukar atau mustahil untuk aplikasi Vue 2 dan 3 untuk wujud bersama dalam projek yang sama kerana ia bergantung pada nama yang sama tetapi versi berbeza vue 包。即使可以使用不同名称的 vue 包别名或使用模块化 Vue（import Vue from 'vue'）作为一个版本和 Vue CDN (window. Vue) Untuk satu versi dalam kod pihak pertama, masalah lain untuk diselesaikan Ia adalah Pustaka Vue yang memerlukan penggunaan versi Vue tertentu.

Ini memerlukan membina dan menggabungkan sub-aplikasi menggunakan versi dan pustaka Vue pilihannya, yang sangat hampir dengan konsep aplikasi micro-frontend.

Andaikan anda mempunyai subaplikasi Vue 3 yang menggunakan perpustakaan khusus Vue 3 (tinymce-vue) dan ditulis khusus untuk mendedahkan semua API awam untuk berkomunikasi dengan dunia luar:

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;

Komponen pembalut Vue 2 bertindak sebagai jambatan antara subaplikasi Vue 3 dan aplikasi Vue 2 yang lain:

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();
  },
};

Jika pembalut dan subaplikasi memerlukan penyegerakan tambahan berdasarkan titik tertentu, seperti provide/inject, rujukan templat, dsb., ini perlu dilaksanakan secara konkrit. Dalam hal ini, ia tidak berbeza dengan penyesuai atau penyesuai Vue 3->Vue 2 yang melibatkan rangka kerja lain (Angular, React).