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
加载的时候不会报错。
作者:孟繁贵 Email:meng010387@126.com 期待共同进步!