使用export输出值，而不是使用export default输出对象

2022-01-16 1,997 阅读2分钟

export default输出一个对象

在a.js中输出一个对象，属性value的值为10

// a.js
export default {
    value: 10,
}

在b.js中引用a.js中输出的对象，并输出一个打印a对象的函数

// b.js
import defA from './a';
export default function logA() {
    console.log(defA);
}

在c.js中引用a.js中输出的对象与b.js中的方法，设置a对象的value为20后调用logA方法

// c.js
import defA from './a';
import logA from './b';
defA.value = 20;
logA();
// {value: 20}

可以看到打印出来的a对象的value值为20，这说明a提供的对象中的属性值被修改了。

import的值是只读的

在a.js中输出一个变量a，值为10

// a.js
export let a = 10;

在b.js中获取a.js中输出的a，并将其赋值为20

// b.js
import { a } from './a';
a = 20;
// ReferenceError: a is not defined

在经过webpack打包后在浏览器中将报出引用错误。
换一种方式看看能不能修改a的值，在c.js中用import as来获取a.js输出的值，再修改a的值

// c.js
import * as A from './a';
A.a = 20;
// TypeError: Cannot set property a of #<Object> which has only a getter

可以看到，经过webpack打包之后，依然不能如愿修改a的值。

当前脚本内可以修改输出的值

a.js中输出a为10，并在两秒后修改变量a的值为20

// a.js
export let a = 10;
setTimeout(function () {
    console.log('两秒后修改a的值为20');
    a = 20;
}, 2000);

b.js中获取a的值，分别在获取后就打印和获取三秒后打印

import { a } from './a';
console.log(a);
setTimeout(function () {
    console.log(a);
}, 3000);
// b.js：10
// a.js: 两秒后修改a的值为20
// b.js: 20

可以看到当前脚本内可以修改输出的值，并且会在修改后应用到所有引用该值的地方。

补充说明

export或export default一个对象时，对象的属性在外部脚本中都是可以修改的。
export default的值在外部脚本中也是不能修改的，只是属性可以被修改。

对我的指导

为了保证数据的稳定性，应当尽量使用export输出多个变量的值，而不是使用export default输出一个包含多个属性的对象。

友情链接：