ES6 import 循环加载

1、示例

（1）a.js

import {bar} from './b';
console.log('a.mjs');
console.log(bar);
export let foo = 'foo';

（2）b.js

import {foo} from './a';
console.log('b.mjs');
console.log(foo);
export let bar = 'bar';

（3）循环引用

<template>
    <div>
        ES6 循环引用
    </div>
</template>

<script>
    import './a'
    export default {
        components: {},
        methods: {},
        mounted() {}
    };
</script>

<style scoped>

</style>

控制台输出：

a.js在执行时，import了b.js。因此先执行b.js。在执行b.js时foo还没有定义，因此输出了undefined。

2、解决方法

函数提升

（1）、a.js

import {bar} from './b';
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' }
export {foo};

（2）b.js

import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};

在执行import {bar} from './b'时，函数foo就已经有定义了，所以b.mjs加载的时候不会报错。