Javascript 在computed中导入组件与在vuejs dynamic import中导入组件有什么区别？

假设我在一个页面/组件中有4个组件，用户可以根据自己的选择使用这些组件（例如：-在输入组件| | |图像组件| |视频组件| | Vudio组件之间切换）。我可以通过两种方式懒洋洋地加载它们

(一)

数据：（）=>（{compName:'input'}），
组成部分：{
输入：（）=>import（'/components/input'），
视频：（）=>导入（'/components/video'），
音频：（）=>导入（'/components/audio'），
image:（）=>导入（'/components/image'），
}

(二)

数据：（）=>（{compName:'input'}），
计算：{
loadComp（）{
const compName=this.compName
return（）=>import（`/components/${compName}`）
}
}

这会有什么不同？动态导入的正确方法是什么？

---

提前感谢

主要区别在于在第二种情况下，Webpack在构建时不知道运行时的

compName

值，因此它将自动为

/components/

文件夹中的每个文件创建单独的包

从

import（）必须至少包含一些有关模块所在位置的信息。捆绑可以限制为特定目录或一组文件，以便在使用动态表达式时，可以包括

import（）

调用中可能请求的每个模块。例如，

import（'./locale/${language}.json'）

将导致

/locale

目录中的每个

.json

文件绑定到新块中。在运行时，当计算变量语言时，任何类似

english.json

或

german.json

的文件都可以使用

你可以用tho来调整应该包含的内容和不应该包含的内容。例如，下面将仅捆绑文件夹中的

.json

文件

导入(
/*webpackInclude:/\.json$/*/
`./locale/${language}`）

如果这是您想要的，那么这两种方法都是进行动态导入的有效且正确的方法。第二个明显的优势是，您不需要逐个编写导入

第二个最大的区别在于，第一种情况下，组件已注册，您可以像往常一样在模板中使用它们的名称：

---

…而在第二种情况下解析的组件未注册，只能在

Levy中使用。谢谢。有一个疑问，请在下面的一行给出一个例子（你可以用“神奇评论”tho（下面的右一章）来调整应该包含的内容和不应该包含的内容）

<template>
  <component :is="compName">
</template>
data: () => ({compName: 'input'}),
components: {
 input: () => import('/components/input'),
 video: () => import('/components/video'),
 audio: () => import('/components/audio'),
 image: () => import('/components/image'),
}

<template>
  <component :is="loadComp">
</template>
data: () => ({compName: 'input'}),
computed: {
 loadComp () {
  const compName = this.compName
  return () => import(`/components/${compName}`)
 }
}