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

本文探讨了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对象是同一个对象。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值