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加载的时候不会报错。