VUE의 고차 구성 요소 (HOC)는 무엇입니까?

VUE의 HOCS는 구성 요소를 취하고 향상된 버전을 반환하여로드 상태 또는 인증 점검과 같은 논리 재사용을 가능하게하는 기능입니다. 1. 구성 요소의 논리를 재사용하는 데 도움이됩니다. 2. 설정을 추상화하여 구성 요소를 깨끗하게 유지하십시오. 3. 내부 변경없이 기능을 추가하십시오. 그러나 Modern VUE 3에서는 래퍼 지옥이나 이름 충돌과 같은 문제의 유연성이 향상되고 더 낮은 문제의 위험이 낮아 공유 논리에 대한보다 관용적이고 유지 가능한 솔루션이됩니다.

고차 성분 (HOC)은 구성 요소 로직을 재사용하기위한 vue.js (및 React)의 패턴입니다. HOC는 일반적으로 RECT와 관련이 있지만 VUE에 개념을 적용 할 수 있습니다. Vue의 생태계는 비슷한 목표를 달성하기 위해 더 많은 관용적 인 방법 (복합 및 Mixins와 같은)을 제공합니다.

VUE에서 고차 구성 요소는 본질적으로 구성 요소를 입력으로 취하고 추가 소품, 동작 또는 논리로 새로운 향상된 구성 요소를 반환하는 함수입니다.

왜 hocs를 사용합니까?

hocs가 당신을 도와줍니다 :

• 여러 구성 요소 (예 : 데이터 가져 오기, 인증 점검)에서 논리를 재사용합니다 .
• 복잡한 설정 로직을 추상화하여 구성 요소를 깨끗하게 유지하십시오 .
• 내부를 수정하지 않고 추가 기능으로 구성 요소를 랩핑하십시오 .

VUE 3은 (구성 API를 통해) 작곡용을 사용하는 것을 장려하지만 대신 HOC를 이해하는 것이 유용합니다. 특히 구형 코드베이스로 작업 할 때 또는 구성 요소를 동적으로 향상시켜야 할 때.

Vue에서 HOC를 만드는 방법

다음은 VUE 3의 HOC의 기본 예입니다 (명확성을 위해 옵션 API 스타일 사용) :

 // hoc/withload.js
로드 링 (WrappedComponent) {{
  반품 {
    소품 : WrappedComponent.props || [],
    데이터 () {
      반품 {
        IsLoading : True,
      };
    },
    Async Mounted () {
      //로드 시뮬레이션
      새로운 약속을 기다리고 있습니다 (resolve => settimeout (resolve, 1000));
      this.isloading = false;
    },
    렌더 () {
      // 모든 원래 소품을 내려 놓고 IsLoading을 추가하십시오
      const props = {... this. $ props, isloading : this.isloading};
      이 is.isloading을 반환하십시오
        ? H ( 'div', 'loading ...')
        : h (WrappedComponent, props, this. $ 슬롯);
    }
  };
}

이제 구성 요소에서 사용하십시오.

 './hoc/withloading'에서 {withloading} 가져 오기;
'./components/userdata.vue'에서 userData 가져 오기;

const userDataWitHloading = WithLoading (userData);

내보내기 기본값 {
  구성 요소 : {
    userdatawithloading
  }
};

이것은 UserData 로딩 상태로 랩합니다. 실제 구성 요소를 렌더링하기 전에 1 초 동안 로딩 메시지를 알 수 있습니다.

일반적인 사용 사례

• 인증 가드 : 경로 구성 요소를 감싸서 사용자가 로그인되었는지 확인하십시오.
• 데이터 가져 오기 : 렌더링하기 전에 비동기 데이터를 주입합니다.
• 로깅 또는 분석 : 구성 요소가 마운트 할 때 추적합니다.
• 권한 점검 : 사용자 역할에 따라 구성 요소를 비활성화하거나 숨 깁니다.

예 : withAuth Hoc

 WithAuth (WrappedComponent, QuessureRole = null) {{
  반품 {
    설정() {
      const user = useauth (); // 이것이 현재 사용자를 반환한다고 가정합니다
      if (! user.isloggedin) {
        return () => h ( 'div', '로그인하십시오.');
      }
      if (requirelole && user.role! == 필수 롤) {
        return () => h ( 'div', 'access denied.');
      }
      return () => h (WrappedComponent);
    }
  };
}

HOCS vs. Composables vs. Mixin

? Modern Vue (3)에서는 작곡가를 선호합니다 . 그들은 hocs 나 mixins보다 더 유연하고 오류가 적습니다.

예를 들어, 위의 로딩 로직은 다음과 같이 작성 될 수 있습니다.

 // composables/useloading.js
내보내기 기능 useloading (Delay = 1000) {
  const isloading = ref (true);
  onmounted (async () => {
    새로운 약속을 기다리고 있습니다 (resolve => settimeout (resolve, delay));
    isloading.value = false;
  });
  반환 {isloading};
}

그런 다음 모든 구성 요소에서 직접 사용하십시오.

 설정() {
  const {isloading} = useloading ();
  반환 {isloading};
}

최종 생각

Vue에서는 HOC가 가능 하지만 논리를 공유하는 관용적 인 방법은 아닙니다. VUE의 반응성 시스템 및 구성 API는 컴포지블이 대부분의 사용 사례에 더 잘 맞습니다.

즉, HOC는 여전히 라이브러리의 동적 랩핑 구성 요소 또는 렌더링 논리를 추상적으로해야 할 때와 같은 고급 시나리오에서 유용 할 수 있습니다.

그래서:
vue에서 hocs를 사용할 수 있습니다
∎ 그들은 React에서 영감을 받았습니다
❌ 그러나 대부분의 경우, 종합 가능한 기능은 더 깨끗하고 보수가 가능합니다.

기본적으로, HOC에 도달하기 전에 두 번 생각하십시오. 아마도 더 단순하고 더 vue와 같은 방법 일 것입니다.

위 내용은 VUE의 고차 구성 요소 (HOC)는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!