계산된 구성 요소와 vuejs 동적 가져오기의 구성 요소를 가져올 때의 차이점은 무엇입니까?

계산된 구성 요소와 vuejs 동적 가져오기의 구성 요소를 가져올 때의 차이점은 무엇입니까?

사용자가 선택할 수 있는 페이지/컴포넌트에 4개의 컴포넌트가 있다고 가정합니다(예: Input comp | | Image Comp | | Video Comp | Vudio Comp).다음 두 가지 방법으로 천천히 로드할 수 있습니다.

1)

<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'),
}

2)

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

그게 무슨 차이가 있나요?다음 중 올바른 동적 가져오기 방법은 무엇입니까?잘 부탁드립니다

주요 차이점은 두 번째 사례에서 웹 팩은 빌드 시 무엇을 알 수 없다는 것입니다.compName값은 런타임에 있을 수 있으므로 자동으로 각 파일에 대해 별도의 번들을 만듭니다./components/폴더입니다.

문서로부터

import()에는 모듈 위치에 대한 정보가 적어도 포함되어 있어야 합니다.번들을 특정 디렉토리 또는 파일 세트로 제한할 수 있기 때문에 동적 표현을 사용할 때 잠재적으로 요구될 수 있는 모든 모듈이import()콜이 포함됩니다.예를들면,import('./locale/${language}.json')모든 것을 야기할 것이다.json줄서다./locale새 청크로 번들되는 디렉토리.실행 시 변수 언어가 계산되면 다음과 같은 파일이 있습니다.english.json또는german.json사용할 수 있습니다.

"매직 댓글"을 사용하여 무엇이 포함되어야 하는지, 무엇이 포함되지 않아야 하는지 조정할 수 있습니다.예를 들어, 다음과 같이만 번들됩니다..json폴더로부터의 파일

import(
  /* webpackInclude: /\.json$/ */
  `./locale/${language}`)

원하는 경우 동적 가져오기를 수행하는 데 두 가지 방법이 모두 유효하고 올바른 방법입니다.두 번째 장점은 Import를 일일이 작성할 필요가 없다는 것입니다.

두 번째 큰 차이는 컴포넌트가 첫 번째 등록된 경우이며 템플릿에서 정상적으로 이름을 사용할 수 있습니다.

<template>
  <input />
  <video />
</template>

...두 번째 케이스와 같이 해결된 컴포넌트는 등록되지 않았으며 다음에서만 사용할 수 있습니다.<component :is="computed" />

언급URL : https://stackoverflow.com/questions/59407660/what-is-the-difference-when-importing-components-in-computed-and-components-in-v