Vue中 js ts 文件被多个vue组件多次 import 后，文件中的对象是同一个对象还是多个对象

最新推荐文章于 2024-05-08 12:13:39 发布

恒哥的爸爸

最新推荐文章于 2024-05-08 12:13:39 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/rendaweibuaa/article/details/116572310

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了Webpack如何通过唯一标识管理模块加载，确保不同组件间共享同一实例。通过具体示例说明了当一个类实例被导出并在多个组件中使用时，这些组件能够访问到相同的数据状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack会对每个文件定义一个id，这个id是唯一的。在import的时候，会先查找一遍文件对应的id，如果未加载，将进行加载。在加载时，就会执行内部的函数。所以，可知，如果导出的是实例化函数对象，那么，这个对象将是同一个对象，如果是函数对象，外部组件也可以实例化当前作用域的对象。

QualityControlParamManager.ts文件
-------------------------------------------
class QualityControlParamManager{
    public globalVal:number = 1;
    public constructor(){
        console.log("--- quality control parameter configuration ---")
    }
}
var qualityControlParamManager =  new QualityControlParamManager();
export default qualityControlParamManager;




QualityContorlTask.vue
-------------------------------------
import globalParamManager from "./QualityControlParamManager"

export default {
    created:{
        globalParamManager.globalVal = 10
        console.log("====val==="+globalParamManager.globalVal)
    }
}



QualityContorl.vue
-------------------------------------
import globalParamManager from "./QualityControlParamManager"

export default {
    created:{
        console.log("====val==="+globalParamManager.globalVal)
    }
}

以上两个页面，QualityContorlTask.vue页面组件显示后，后续路由到页面组件QualityContorl.vue，globalVal的值是10。所以，可知两个组件中导入的globalParamManager对象是同一个对象。