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