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加載的時候不會報錯。