Изменчивая разница между именованным ES6 и экспортом по умолчанию - PullRequest
Новая
       4

Изменчивая разница между именованным ES6 и экспортом по умолчанию

3 голосов
/ 17 октября 2019

При импорте / экспорте данных из модулей ES6 изменчивость этих данных, по-видимому, различается между именованным импортом и экспортом. Есть ли причина для этого или какая-то принципиальная разница, которую я не понимаю? 

// counter.js
export let count = 0;

export const incrementCount = () => count += 1;

export default count;

// main-default.js
import count, { incrementCount } from './counter';

console.log(count); // 0

incrementCount();
incrementCount();

console.log(count); // 0

// main-named.js
import { count, incrementCount } from './counter';

console.log(count); // 0

incrementCount();
incrementCount();

console.log(count); // 2

В обоих сценариях я бы ожидал, что count будет увеличиваться. Однако это происходит только при использовании именованного экспорта.

Ответы [ 2 ]

2 голосов
/ 18 октября 2019

Проблема в том, что вы использовали export default count;, который не экспортирует привязку count (позволяющую импортировать переменную с изменяемым именем при импорте), но фактически создает новую скрытую переменную, которая получает назначенное начальное значение, но никогда не изменяетсяпотом. 

export default count;

десугаров до 

let *default* = count; // where *default* is a guaranteed collision-free identifier
export { *default* as default }

Вместо этого вам нужно: 

// counter.js
let count = 0;
export const incrementCount = () => count += 1;
export { count as default }


// main-default.js
import countA, { default as countB, incrementCount } from './counter';

console.log(countA, countB); // 0, 0
incrementCount();
console.log(countA, countB); // 1, 1

См. также Как я могу псевдоним импорта по умолчанию в Javascript? .

0 голосов
/ 17 октября 2019

Это потому, что количество это число, а не объект. Импортируя default, вы присваиваете значение count новой переменной. По имени импорта у вас есть только для чтения скопировать как объект. Учтите это: 

// counter.js
export let count = {a:0};
export const incrementCount = () => count.a += 1;
export default (function(){ return count.a})();

Когда вы запустите: 

// main-default.js
import countdefault, { count, incrementCount } from './counter.mjs';
console.log(countdefault, count);
incrementCount();
incrementCount();
console.log(countdefault, count);

, вы получите:

0 {a: 0}

0 {a:2}

но при изменении экспорта счетчика на объект: 

// counter.js
export let count = {a:0};
export const incrementCount = () => count.a += 1;
export default (function(){ return count})();

вы получите:

{a: 0} {a: 0}

{a: 2} {a: 2}

...