javascript - 请问在工程化项目中，不同组件内导入同一个模块，得到的导出对象是同一个对象吗？

Question

如题，新增一个模块eventBus，例如：

export default new Vue()

现在我们有2个组件，分别是a.vue和b.vue，分别导入上面模块

import eventBus from './eventBus.js'

请问得到的eventBus对象是同一个吗？还是不同的2个对象？

Answer 1

按照规范，是同一个。如果你想要不同的，可以自己想办法实现函数。

Answer 2

导入模块时执行的代码只会执行一次，并且被导出的对象实例会被缓存起来供后续导入使用。因此，每次导入相同的模块时，都会得到同一个被导出的对象实例

例如 ：

文件 ： axios.tsexport const axios = Axios.create({  // baseURL: });console.log('执行次数');

无论被多少文件 import 只会被执行一次；

你如果不觉得不正确 可以做个测试；
example : Example.ts

class Example {  time = Math.random() * 10;}export default new Example();

然后用其他文件导入Example.ts 然后打印 time是否是固定值即可。

Answer 3

在工程化项目中，不同组件内导入同一个模块，得到的导出对象是否是同一个对象，取决于模块的导入方式和模块的导出方式。

对于你的具体例子，如果eventBus.js模块中使用了export default new Vue()导出一个新的Vue实例，那么在导入时，这个Vue实例会被单独创建。即使在不同的组件中导入这个模块，得到的也是不同的Vue实例。

这是因为使用export default导出的模块在每次导入时都会创建一个新的副本。这意味着如果你在多个组件中导入这个模块，你得到的将是多个独立的实例，而不是同一个实例。

例如，以下代码片段显示了导入的是同一个模块，但得到的export对象是不同的：

// eventBus.jsexport default new Vue()// a.vueimport eventBus from './eventBus.js'console.log(eventBus === eventBus) // 输出：false// b.vueimport eventBus from './eventBus.js'console.log(eventBus === eventBus) // 输出：false

在上述示例中，我们在a.vue和b.vue中都导入了eventBus模块，但得到的是两个完全独立的Vue实例。所以，eventBus === eventBus的结果是false。这意味着它们不是同一个对象。