VUE3 개발 기본 사항: 비동기 구성 요소 사용에 대한 튜토리얼

Vue 3은 Vue.js의 최신 주요 버전으로, Vue 2에 비해 많은 새로운 기능과 개선 사항이 포함되어 있습니다. 가장 눈에 띄는 개선 사항 중 하나는 비동기식 구성 요소를 사용하는 것입니다. 이 기사에서는 Vue 3의 비동기 구성 요소의 사용법과 기술을 살펴보겠습니다.

비동기 컴포넌트란 무엇인가요?

Vue에서는 import 문이나 require 함수를 통해 컴포넌트를 도입할 수 있습니다. 이러한 구성 요소를 동기 구성 요소라고 하며 해당 코드는 애플리케이션이 시작되는 즉시 로드되고 컴파일됩니다. 그러나 앱이 커짐에 따라 동기적으로 로드되는 구성 요소로 인해 첫 번째 화면 로드 시간이 길어지고 심지어 많은 양의 메모리와 대역폭을 소비할 수도 있습니다.

이 문제를 해결하기 위해 Vue 3에서는 비동기 구성 요소 개념을 제공합니다. 비동기 구성 요소는 필요할 때 로드되고 컴파일되는 구성 요소입니다. 이는 애플리케이션이 특정 구성 요소를 로드해야 할 때 서버에서 이러한 구성 요소를 비동기적으로 요청하고 응답이 돌아온 후 동적으로 로드하고 컴파일한다는 것을 의미합니다. 이를 통해 첫 번째 화면 로드 시간을 크게 줄이고 애플리케이션의 메모리 공간과 대역폭 소비를 줄일 수 있습니다.

비동기 구성 요소를 사용하는 방법

Vue 3에서는 비동기 구성 요소를 다음과 같은 방식으로 정의할 수 있습니다.

const AsyncComponent = defineAsyncComponent(async () => {
  // 异步加载和编译组件的代码
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

위 코드는 AsyncComponent라는 비동기 구성 요소를 정의합니다. 비동기 구성 요소를 정의하는 방법은 비동기 구성 요소가 defineComponent 함수 대신 defineAsyncComponent 함수를 사용해야 한다는 점을 제외하면 동기 구성 요소와 유사합니다. AsyncComponent的异步组件。定义异步组件的方式与同步组件类似，只不过异步组件需要使用defineAsyncComponent函数而不是defineComponent函数。

在异步组件的定义中，我们通过async和await关键字异步加载和编译组件的代码。在这个例子中，我们使用import语句从@/components/AsyncComponent.vue文件中加载组件，并返回它的默认导出。需要注意的是，在异步组件的定义中，我们只需要返回组件的默认导出即可，不要返回Vue实例或组件选项。

一旦我们定义了异步组件，我们就可以在父组件中使用它了。例如，如果我们想在App.vue组件中使用上面定义的异步组件，我们可以这样做：

<template>
  <div>
    <h1 id="异步组件">异步组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComponent = defineAsyncComponent(async () => {
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

上面的代码中，在components选项中注册了异步组件AsyncComponent。然后在模板中使用<asynccomponent></asynccomponent>标记，就可以显示异步组件了。

当父组件被渲染时，Vue 3会检测到<asynccomponent></asynccomponent>标记，然后从服务器异步请求我们定义的异步组件。一旦异步响应返回，Vue将动态加载和编译组件，并将其显示在页面上。

除了上面的方式，我们还可以使用Vue 3提供的defineAsyncComponent函数的其他方式来定义异步组件。例如，我们可以使用动态导入和defineAsyncComponent

비동기 구성 요소 정의에서는 async 및 await 키워드를 사용하여 구성 요소의 코드를 비동기적으로 로드하고 컴파일합니다. 이 예에서는 import 문을 사용하여 @/comComponents/AsyncComponent.vue 파일에서 구성 요소를 로드하고 기본 내보내기를 반환합니다. 비동기식 구성 요소 정의에서는 Vue 인스턴스나 구성 요소 옵션이 아닌 구성 요소의 기본 내보내기만 반환하면 됩니다.

비동기 구성 요소를 정의한 후에는 상위 구성 요소에서 사용할 수 있습니다. 예를 들어 App.vue 구성 요소에서 위에 정의된 비동기 구성 요소를 사용하려면 다음과 같이 하면 됩니다.

const AsyncComponent = defineAsyncComponent(() => import("@/components/AsyncComponent.vue"))

위 코드에서 comComponents에 등록하세요. > 옵션 비동기 구성요소 AsyncComponent가 설치되었습니다. 그런 다음 템플릿의 <asynccomponent></asynccomponent> 태그를 사용하여 비동기 구성 요소를 표시합니다.

상위 구성 요소가 렌더링되면 Vue 3는 <asynccomponent></asynccomponent> 태그를 감지한 다음 서버에서 정의한 비동기 구성 요소를 비동기식으로 요청합니다. 비동기 응답이 돌아오면 Vue는 구성 요소를 동적으로 로드 및 컴파일하고 페이지에 표시합니다.

위 방법 외에도 Vue 3에서 제공하는 defineAsyncComponent 함수를 사용하여 비동기 구성 요소를 정의하는 다른 방법을 사용할 수도 있습니다. 예를 들어, 동적 가져오기와 defineAsyncComponent 함수의 조합을 사용하여 비동기 구성 요소를 정의할 수 있습니다. 🎜

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      import("@/components/AsyncComponent.vue").then(module => {
        resolve(module.default)
      })
    }, 1000)
  })
)

🎜 또한 전통적인 Promise 구문을 사용하여 비동기 구성 요소를 정의할 수도 있습니다. 🎜rrreee🎜위에서 코드에서는 1초 지연의 A Promise를 사용하여 구성 요소 로드 및 컴파일을 비동기식으로 시뮬레이션합니다. 🎜🎜결론🎜🎜비동기 구성 요소는 Vue 3의 강력하고 유용한 기능입니다. 비동기식 구성 요소를 사용하면 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사에서는 Vue 3의 비동기 구성 요소의 사용법과 기술에 대해 자세히 알아봅니다. 이 글이 Vue 3의 비동기 컴포넌트를 이해하고 사용하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 VUE3 개발 기본 사항: 비동기 구성 요소 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!