We often see circular dependency, why it's a problem, why we should avoid it and hwo to avoid it?
Let's see any example first
// main.js
import A from "moduleA"
// moduleA.js
import B from "./moduleB"
console.log("ModuleA", B)
export default 'A'
// moduleB.js
import A from "moduleA"
console.log('MoudleB', A)
export default 'B'
The output is:
ModuleB: undefined
ModuleA: 'B'
Why is so?
- From main module, we import A
- Then code run into A module
- It tries to import module B, but module A have yet export
- Then code run into B module
- because A has yet export, so log out
ModuleB: undefined
- then moulde B exports
- because A has yet export, so log out
- Code back to module A, log out
ModuleA: B
Why it's important?
In Frontend, from one ComponentA, we might import Component B, based on some event, Compoennt B need to include Component A... in such case, we might run into issue.
How to resolve the issue?
Use Vue as an example
// ComponentA.vue
import ComponentB from "./ComponentB.vue";
export default {
components: {
ComponentB // this will be undefined
}
}
// ComponentB.vue
import ComponentA from "./ComponentA.vue";
export default {
components: {
ComponentA
}
}
The ways to solve the issue:
Solution A: using life cycle hook
// ComponentA.vue
import ComponentB from "./ComponentB.vue";
export default {
beforeCreate() {
this.$options.components.ComponentB = require("./ComponentB.vue").default
}
}
// ComponentB.vue
import ComponentA from "./ComponentA.vue";
export default {
components: {
ComponentA
}
}
Solution B: using lazy import:
// ComponentA.vue
import ComponentB from "./ComponentB.vue";
export default {
components: {
ComponentB: () => import('./ComponentB.vue').then(m => m.default)
}
}
// ComponentB.vue
import ComponentA from "./ComponentA.vue";
export default {
components: {
ComponentA
}
}
标签:vue,ComponentA,ComponentB,default,Javascript,dependency,export,import,Circular From: https://www.cnblogs.com/Answer1215/p/18448408