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

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对象是同一个对象。

你可能感兴趣的:(Vue)