ES6 import 循環加載

一、示例

（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。

二、解決方法

函數提高

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