VUE3 개발 시작하기: 컴포넌트를 사용한 동적 로딩 및 등록

VUE3는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나이며 사용 편의성, 유연성, 성능 최적화 및 기타 장점으로 인해 점점 더 많은 개발자의 관심을 끌고 있습니다. VUE3에서는 컴포넌트를 사용하는 것이 매우 일반적인 작업이지만 대규모 프로젝트에서는 컴포넌트의 동적 로드 및 등록이 필요할 수 있으므로 이 기사에서는 컴포넌트를 사용하여 동적으로 로드하고 등록하는 방법을 소개합니다.

먼저 VUE3에 컴포넌트가 어떻게 등록되는지 이해해야 합니다. VUE3에서는 객체 리터럴이나 Vue.createApp 메소드를 사용하여 구성요소를 등록할 수 있습니다. 다음은 사용자 정의 구성 요소의 간단한 예입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

이 구성 요소는 문자열 유형이어야 하는 "message"라는 속성을 수신합니다. 그렇지 않으면 오류가 보고됩니다. 이제 구성요소를 동적으로 로드하고 등록하는 방법을 살펴보겠습니다.

구성 요소의 동적 로딩

구성 요소의 동적 로딩은 애플리케이션을 실행할 때 실제로 필요할 때만 구성 요소가 동적으로 로드된다는 의미입니다. 이렇게 하면 애플리케이션의 성능과 응답성이 향상될 수 있습니다.

VUE3는 비동기 구성 요소의 기능을 제공합니다. 구성 요소는 비동기 구성 요소로 정의한 다음 필요할 때 로드할 수 있습니다. 다음은 비동기 구성 요소의 예입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

비동기 구성 요소를 사용할 때 구성 요소를 비동기 함수로 정의해야 합니다. 이 함수에서는 import()를 사용하여 구성 요소를 비동기적으로 로드하고 로드가 완료된 후 구성 요소를 반환할 수 있습니다.

다음은 보다 완전한 비동기 구성 요소 등록 예입니다.

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <async-component :message="message" />
  </div>
</template>

<script>
  const AsyncComponent = () => ({
    // 加载异步组件
    component: import('./AsyncComponent.vue'),
    // 显示加载中
    loading: LoadingComponent,
    // 显示加载错误
    error: ErrorComponent,
    // 展示组件
    delay: 200,
    // 如果组件定义了名字，则可以直接使用这个字面量
    // name: 'my-component-name'
  })

  export default {
    components: {
      AsyncComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

이 예에서는 Vue 비동기 구성 요소의 동적 로딩 방법을 사용하고 먼저 비동기 구성 요소를 정의한 다음 해당 메서드를 사용하여 템플릿에서 렌더링합니다. AsyncComponent는 단지 함수이기 때문에 구성 요소가 초기화될 때 구성 요소를 로드할 필요가 없으며 필요할 때 자동으로 로드됩니다.

AsyncComponent를 정의할 때 구성 요소의 구성 요소 속성으로 promise의 반환 값을 갖는 함수를 지정하여 구성 요소를 비동기적으로 로드할 수 있습니다. 구성 요소에 미리 로드된 일부 구성 요소가 필요한 경우 로딩 및 오류 옵션을 사용하여 이러한 구성 요소의 이름을 지정할 수 있습니다. 구성 요소가 성공적으로 로드된 후 지연 옵션을 사용하여 실제 구성 요소가 렌더링되기 전의 지연 시간을 지정할 수 있습니다.

컴포넌트 등록

VUE3에서는 글로벌 등록이나 로컬 등록을 이용해 컴포넌트를 등록할 수 있습니다. 둘 사이의 차이점은 구성 요소가 전역으로 등록되었는지 아니면 해당 구성 요소의 상위 구성 요소로 제한되었는지 여부입니다.

글로벌 등록을 사용하면 애플리케이션 전체에서 컴포넌트를 사용할 수 있지만, 로컬 등록은 상위 컴포넌트와 하위 컴포넌트 사이에서만 사용할 수 있습니다. 다음은 전역적으로 등록된 구성 요소와 로컬에 등록된 구성 요소의 예입니다.

구성 요소의 전역 등록

구성 요소를 전역적으로 등록하는 방법은 구성 요소를 Vue 개체의 구성 요소 옵션에 마운트하는 것입니다. 구성 요소의 전역 등록:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

이 예에서는 MyComponent 구성 요소를 가져와서 Vue 인스턴스의 구성 요소 옵션에 배치한 다음 템플릿에서 my-comComponent를 사용하여 표시합니다.

부분 등록 컴포넌트

부분 등록 컴포넌트는 현재 컴포넌트와 그 하위 컴포넌트에서만 사용할 수 있습니다. 다음은 구성 요소를 로컬로 등록하는 예입니다.

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      'my-component': MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

이 예에서는 MyComponent를 현재 구성 요소의 로컬 구성 요소로 등록합니다. 구성 요소 속성에서 구성 요소 이름을 "my-compound"로 설정한 다음 구성 요소 인스턴스를 값으로 전달합니다.

요약

이 기사에서는 VUE3의 구성 요소를 사용하여 구성 요소를 동적으로 로드하고 등록하는 방법을 배웠습니다. 우리는 비동기식 구성 요소를 사용하고 전역 및 로컬 구성 요소를 등록하여 이를 달성합니다. 이러한 기술을 통해 VUE3에서 더 나은 성능과 유연성을 달성할 수 있습니다.

위 내용은 VUE3 개발 시작하기: 컴포넌트를 사용한 동적 로딩 및 등록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!