问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
104828720
    1.4k34253

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

    export default new Vue()

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

    import eventBus from './eventBus.js'

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

    javascript前端
    阅读 1k
    avatarAI BotBETA

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

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

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

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

    // eventBus.js
export default new Vue()

// a.vue
import eventBus from './eventBus.js'
console.log(eventBus === eventBus) // 输出：false

// b.vue
import eventBus from './eventBus.js'
console.log(eventBus === eventBus) // 输出：false

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

    2 个回答
    得票最新
    头像
    寸寸青丝愁华年
      730114

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

      例如 ：

      文件 ： axios.ts
export const axios = Axios.create({
  // baseURL: 
});

console.log('执行次数');

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

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

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

export default new Example();

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

      头像
      Meathill
        22.6k133642

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题