如何跨多个文件中的多个 Vue 实例正确使用 Vue 3 composition-api

Question

tl;dr 在基础 js 文件中导入 Vue3 的正确方法是什么，然后在将在该基础文件之后加载的其他独立 js 文件中使用 Vue 的 composition-api？

---

我正在使用 Vue 来增强特定页面的用户体验。例如，在注册页面以执行 ajax 请求并显示服务器错误而无需重新加载页面。简而言之，MPA 中的迷你 SPA...

在 Vue2 中，在基础文件中导入 Vue，然后实例化一个新的 Vue 实例并在后续文件中使用 Vue 的 options-api 没有问题。并且后续文件的大小保持最小，因为它们只包含该文件所需的逻辑。

但是，由于 Vue3 的 composition-api 需要导入 ref, reactive, watch, onMount...etc，导致后面的文件重新导入 Vue。我试图克服这个问题如下：

// register.blade.php (contains)
<div id="root">
  <input type="text" name="first_name" v-model="FirstName">
  <input type="text" name="last_name" v-model="LastName">
// (before edit) <script src="main.js"></script>
// (before edit) <script src="register.js"></script>
  <script src="{{ mix('/main.js') }}"></script>
  <script src="{{ mix('/register.js') }}"></script>
</div>

// main.js (contains)
// (before edit) import Vue from 'node_modules/vue/dist/vue.js';
// (before edit) window.Vue = Vue;
window.Vue = require('vue');

// register.js (contains)
const app = Vue.createApp({
  setup() {
    const FirstName = Vue.ref('');
    const LastName = Vue.ref('');
    const FullName = Vue.computed(() => FirstName.value + ' ' + LastName.value);

    return {
      FirstName, LastName, FullName
    }
  }
});
app.mount('#root');

这对于这个简单的例子来说很好，但我想知道前缀 Vue. 的方法是否正确？是否可以使用该方法访问 Vue 为 setup() 方法公开的所有函数？

编辑： 我正在使用 laravel mix 包装的 webpack，为了简单起见，我从初始代码中删除了它，但我认为它被证明是相关的。对最初提供的代码中的编辑进行注释以避免混淆。

// webpack.mix.js (contains)
mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
    }
  }
});

mix.js('resources/main.js', 'public/main.js')
  .js('resources/register.js', 'public/register.js')
  .version();

Answer 1

在每个.js 文件中从 Vue 3（ref、watch、computed...）导入单独的部分时，应该没有额外的开销。事实上，如果您使用的是捆绑器，这将有助于摇树过程使生成的文件更小 (great explanation by Evan You)。

导入所有 Vue 并以当前方式使用它并没有错，类似于在 Vue 2 中的使用方式。如果语法困扰您，您可以解构您使用的内容，即

// register.js (contains)
const { ref, computed } = Vue;

const app = Vue.createApp({
  setup() {
    const FirstName = ref('');
    const LastName = ref('');
    const FullName = computed(() => FirstName.value + ' ' + LastName.value);

    return {
      FirstName, LastName, FullName
    }
  }
});

app.mount('#root');

编辑：

我对 Laravel Mix 不熟悉，但也许你可以试试这样：

// webpack.mix.js (contains)
const jsfiles = [
    'resources/main.js',
    'public/main.js',
    'resources/register.js',
    'public/register.js',
];

mix.js(...jsFiles).extract(['vue']).webpackConfig({
    resolve: {
        alias: {
            'vue$': path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
        }
    }
}).version();

// now in your `register.js` and `main.js` use `import`, not `require`
//
// import Vue from 'vue';

Answer 2

你可以使用Vue.ref 或ref 如果你像这样import {ref,reactive} from 'vue/dist/vue.js'; 那样描述

这应该不是必需的：

window.Vue = Vue;

只要您在每个文件中使用import Vue from 'vue/dist/vue.js';，例如register.js（或解构版本）。即使您有多个导入，也不意味着它将被多次重新包含。打包器只会添加一次 Vue（或部分 Vue 库）。