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

tl；dr在基本js文件中导入Vue3，然后在其他独立js文件中使用Vue的合成api的正确方法是什么

---

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

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

但是，由于Vue3的合成api需要导入

ref、reactive、watch、onMount…等

，这导致后续文件再次导入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>

对于这个简单的示例，这很好，但我想知道使用

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

---

如果您像这样从“Vue/dist/Vue.js”中导入{ref，reactive}，则可以使用

Vue.ref

或

ref

这是不必要的：

window.Vue = Vue;

---

只要使用

从“Vue/dist/Vue.js”导入Vue，如
register.js
（或解构版本）。即使有多个导入，也不意味着它将被多次重新包含。捆绑程序只会添加一次Vue（或Vue库的一部分）。
如果您这样分解结构，则可以使用
Vue.ref
或
ref
从“Vue/dist/Vue.js”导入{ref，reactive}

这是不必要的：

window.Vue = Vue;

只要使用
从“Vue/dist/Vue.js”导入Vue，如
register.js
（或解构版本）。即使有多个导入，也不意味着它将被多次重新包含。捆绑程序只会添加一次Vue（或Vue库的一部分）。
从Vue 3（
ref
，
watch
，
computed
…）中的每个
.js
文件导入单独的部分时，不应该有额外的开销。事实上，如果您使用的是bundler，这将有助于树抖动过程使生成的文件变小（）

导入所有Vue并以当前的方式使用它并没有什么错，就像在Vue 2中一样。如果语法困扰您，您可以对所使用的内容进行解构，即

//register.js（包含）
常数{ref，computed}=Vue；
const app=Vue.createApp({
设置（）{
常数FirstName=ref（“”）；
const LastName=ref（“”）；
const FullName=computed（（）=>FirstName.value+''+LastName.value）；
返回{
名字，姓氏，全名
}
}
});
app.mount（“#根”）；

编辑：

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

//webpack.mix.js（包含）
常量jsfiles=[
“resources/main.js”，
“public/main.js”，
'resources/register.js'，
“public/register.js”，
];
js（…jsFiles）.extract（['vue']）.webpackConfig({
决心：{
别名：{
“vue$”：path.resolve（uu dirname，'node_modules/vue/dist/vue.esm bundler.js'），
}
}
}).version（）；
//现在在'register.js'和'main.js'中使用'import'，而不是'require'`
//
//从“Vue”导入Vue；
从Vue 3（
ref
，
watch
，
computed
…）导入每个
.js
文件中的单独部分时，不应该有额外的开销。事实上，如果您使用的是bundler，这将有助于树抖动过程使生成的文件变小（）

导入所有Vue并以当前的方式使用它并没有什么错，就像在Vue 2中一样。如果语法困扰您，您可以对所使用的内容进行解构，即

//register.js（包含）
常数{ref，computed}=Vue；
const app=Vue.createApp({
设置（）{
常数FirstName=ref（“”）；
const LastName=ref（“”）；
const FullName=computed（（）=>FirstName.value+''+LastName.value）；
返回{
名字，姓氏，全名
}
}
});
app.mount（“#根”）；

编辑：

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

//webpack.mix.js（包含）
常量jsfiles=[
“resources/main.js”，
“public/main.js”，
'resources/register.js'，
“public/register.js”，
];
js（…jsFiles）.extract（['vue']）.webpackConfig({
决心：{
别名：{
“vue$”：path.resolve（uu dirname，'node_modules/vue/dist/vue.esm bundler.js'），
}
}
}).version（）；
//现在在'register.js'和'main.js'中使用'import'，而不是'require'`
//
//从“Vue”导入Vue；
通过从“vue”添加
导入{ref，computed}
在
register.js
中，使用laravel mix进行编译，文件大小从几千字节跃升到1.04 MiB。我假设这是因为webpack不知道
register.js
将位于
main.js
之后，并且将继承
main.js
中已经导入的内容。如果我在编辑之前提出的问题没有通过从“vue”添加
import{ref，computed}来描绘完整的画面，请接受我的道歉
在
register.js
中，使用laravel mix进行编译，文件大小从几千字节跃升到1.04 MiB。我想这是因为webpack不知道
register.js
会这样做
window.Vue = Vue;