VUE 구성 API가 Vue Mixins를 대체하는 방법

VUE 구성 요소간에 코드 공유? Vue 2에 익숙하다면 Mixin을 사용하여이를 달성했을 수 있습니다. 그러나 새로운 구성 API (현재 VUE 2 용 플러그인으로 제공되며 VUE 3의 다가오는 기능)는 더 나은 솔루션을 제공합니다.

이 기사는 Mixin의 단점을 탐구하고 구성 API가 이러한 단점을 극복하고 VUE 응용 프로그램을보다 확장 가능하게 만드는 방법을 이해합니다.

Mixin에 대한 간단한 설명

다음 섹션에서 다루는 것이 중요하기 때문에 Mixin 모드를 빠르게 검토합시다.

일반적으로 VUE 구성 요소는 데이터, 메소드, 계산 속성 등과 같이 구현 해야하는 기능을 나타내는 다양한 속성을 갖는 JavaScript 객체로 정의됩니다.

 // mycomponent.js
내보내기 기본값 {
  데이터 : () => ({
    MyDataproperty : NULL
  }),
  방법 : {
    myMethod () {...}
  }
  // ...
}

구성 요소간에 동일한 속성을 공유하려면 공통 속성을 별도의 모듈로 추출 할 수 있습니다.

 // mymixin.js
내보내기 기본값 {
  데이터 : () => ({
    MysharedDataproperty : NULL
  }),
  방법 : {
    MysharedMethod () {...}
  }
}

이제 믹스 인 구성 속성에 할당 하여이 믹스 인을 사용하는 구성 요소 에이 믹스 인을 추가 할 수 있습니다. 런타임에 Vue는 구성 요소의 속성을 추가 된 믹스 인과 병합합니다.

 // 소비자 component.js
"./mymixin.js"에서 mymixin을 가져옵니다.

내보내기 기본값 {
  Mixins : [Mymixin],
  데이터 : () => ({
    mylocaldataproperty : null
  }),
  방법 : {
    mylocalmethod () {...}
  }
}

이 특정 예에서 런타임에 사용되는 구성 요소 정의는 다음과 같습니다.

 내보내기 기본값 {
  데이터 : () => ({
    MysharedDataproperty : Null,
    mylocaldataproperty : null
  }),
  방법 : {
    MysharedMethod () {...},
    mylocalmethod () {...}
  }
}

Mixin은 "유해한"것으로 간주됩니다.

2016 년 중반에 Dan Abramov는“Mixins는 해로운 고려”를 썼는데, 그는 논리를 재사용하기 위해 React 구성 요소에서 Mixins를 사용하여 논리를 방지하여 피하는 것을 옹호한다고 믿었습니다.

불행히도, 그가 React Mixin에 대해 언급 한 단점은 Vue에도 적용됩니다. 구성 API가 이러한 결점을 어떻게 극복하는지 이해하기 전에 이러한 결점을 살펴 보겠습니다.

명명 충돌

우리는 Mixin Mode가 런타임에 두 개의 객체를 어떻게 병합하는지 봅니다. 그들이 모두 같은 이름의 재산을 공유하면 어떻게됩니까?

 const mixin = {
  데이터 : () => ({
    MyProp : NULL
  })
}

내보내기 기본값 {
  Mixins : [Mixin],
  데이터 : () => ({
    // 같은 이름!
    MyProp : NULL
  })
}

이것이 합병 전략이 시작되는 곳입니다. 구성 요소에 동일한 이름의 여러 옵션이 포함되어있을 때 발생하는 일이 발생하는 일련의 규칙입니다.

VUE 구성 요소의 기본값 (그러나 구성 가능)은 로컬 옵션이 Mixin 옵션을 무시할 수 있도록 명시합니다. 그러나 예외가 있습니다. 예를 들어, 동일한 유형의 여러 수명주기 후크가있는 경우 이러한 후크가 후크 어레이에 추가되고 모든 후크가 순차적으로 호출됩니다.

실제 오류가 발생하지 않더라도 여러 구성 요소와 Mixins간에 명명 된 속성을 처리 할 때 코드를 작성하는 것이 점점 어려워 질 수 있습니다. 이는 NPM 패키지로서의 타사 믹스 인이면 충돌을 일으킬 수있는 이름이 지정된 특성입니다.

암시 적 의존성

Mixin과 그것을 사용하는 구성 요소 사이에는 계층 적 관계가 없습니다. 이는 구성 요소가 Mixin (예 : MysharedDataproperty)에 정의 된 데이터 속성을 사용할 수 있지만, Mixin은 구성 요소 (예 : Mylocaldataproperty)에 정의 된 데이터 속성을 가정 할 수 있습니다. 이는 Mixin을 사용하여 입력 유효성 검사를 공유 할 때 일반적입니다. Mixin은 구성 요소가 자체 유효성 검사 방법에서 사용할 입력 값을 가질 것으로 기대할 수 있습니다.

그러나 이것은 문제를 일으킬 수 있습니다. 나중에 구성 요소를 리팩터링하고 Mixin이 요구하는 변수의 이름을 변경하려면 어떻게됩니까? 구성 요소에서 어떤 문제도 알지 못합니다. 코드 검사관도 찾지 못할 것입니다. 런타임에 오류 만 볼 수 있습니다.

이제 많은 믹스 인이 포함 된 구성 요소를 상상해보십시오. 로컬 데이터 속성을 리팩터링 할 수 있습니까, 아니면 믹스 인을 깨뜨릴 수 있습니까? 어떤 믹스 인? 우리는 모든 믹스 인을 수동으로 검색해야합니다.

Mixin에서 마이그레이션하십시오

Dan의 기사는 고급 구성 요소, 유틸리티 방법 및 기타 구성 요소 조합 패턴을 포함하여 Mixin의 대안을 제공합니다.

Vue는 여러면에서 React와 비슷하지만 그가 제안한 대체 패턴은 Vue로 잘 전환되지 않습니다. 따라서이 게시물은 2016 년 중반에 작성되었지만 VUE 개발자는 그 이후로 Mixin 문제를 지속적으로하고 있습니다.

지금까지. Mixin의 단점은 구성 API의 주요 동기 요인 중 하나입니다. 그것이 믹스 인 문제를 극복하는 방법을 이해하기 전에 그것이 어떻게 작동하는지 간단히 살펴 보겠습니다.

구성 API 충돌 코스

구성 API의 핵심 아이디어는 구성 요소 (예 : 상태, 메소드, 계산 속성 등)의 함수를 객체 속성으로 정의하는 대신 새 설정 함수에서 리턴 된 JavaScript 변수로 정의된다는 것입니다.

다음은 "카운터"함수를 정의하는 구성 API를 사용하여 정의 된 VUE 2 구성 요소의 전형적인 예입니다.

 //counter.vue
내보내기 기본값 {
  데이터 : () => ({
    카운트 : 0
  }),
  방법 : {
    증분 () {
      this.count;
    }
  },
  계산 : {
    double () {
      this.count * 2;
    }
  }
}

다음은 Composition API를 사용하여 정의 된 동일한 구성 요소입니다.

 // 카운터. vue
"vue"에서 가져 오기 {ref, 계산};

내보내기 기본값 {
  설정() {
    const count = ref (0);
    const double = computed (() => count.value * 2)
    함수 증분 () {
      count.value;
    }
    반품 {
      세다,
      더블,
      증가
    }
  }
}

먼저 REF 함수를 가져 왔는데,이를 통해 데이터 변수와 거의 동일한 기능을 갖는 응답 변수를 정의 할 수 있습니다. 컴퓨터 기능에 대해서도 마찬가지입니다.

증분 메소드는 응답하지 않으므로 정상적인 JavaScript 기능으로 선언 할 수 있습니다. 카운트 응답 변수의 값을 변경하려면 하위 단체 값을 변경해야합니다. REF로 생성 된 응답 변수는 통과시 응답 성을 유지하기 위해 개체가되어야하기 때문입니다.

심판의 작동 방식에 대한 자세한 이해를 위해 VUE Composition API 문서를 참조하는 것이 가장 좋습니다.

이러한 함수를 정의한 후 설정 함수에서 반환합니다. 위의 두 구성 요소의 함수에는 차이가 없습니다. 우리가 한 것은 대체 API를 사용하는 것뿐입니다.

팁 : 구성 API는 VUE 3의 핵심 기능이지만 VUE 2에서 NPM 플러그인 @vue/composition-api를 사용할 수도 있습니다.

코드 추출

구성 API의 첫 번째 명백한 장점은 논리 추출의 용이성입니다.

구성 API를 사용하여 정의하는 기능이 JavaScript 모듈 usecounter에 있도록 위에서 정의 된 구성 요소를 리팩터링하겠습니다. (함수 설명으로 "사용"을 사용하는 접두사는 구성 API의 명명 규칙입니다.)

 // usecounter.js
"vue"에서 가져 오기 {ref, 계산};

내보내기 기본 기능 () {
  const count = ref (0);
  const double = computed (() => count.value * 2)
  함수 증분 () {
    count.value;
  }
  반품 {
    세다,
    더블,
    증가
  }
}

코드 재사용

구성 요소 에서이 함수를 사용하기 위해 모듈을 구성 요소 파일로 가져 와서 호출합니다 (가져 오기는 기능 임). 이것은 우리가 정의하는 변수를 반환 한 다음 설정 함수에서 반환 할 수 있습니다.

 // mycomponent.js
"./usecounter.js"에서 usecounter를 가져 오기;

내보내기 기본값 {
  설정() {
    const {count, double, ycrement} = usecounter ();
    반품 {
      세다,
      더블,
      증가
    }
  }
}

처음에는 조금 길고 의미가없는 것처럼 보이지만이 패턴이 이전에 본 믹스 인 문제를 어떻게 극복하는지 살펴 보겠습니다.

명명 갈등 ... 해결되었습니다!

우리는 Mixin이 사용 구성 요소의 이름과 동일한 이름 일 수있는 속성을 사용할 수 있거나 사용 구성 요소가 사용하는 다른 Mixin의 속성과 더 은폐 할 수있는 속성을 사용할 수 있습니다.

이 문제는 구성 API에 존재하지 않기 때문에 합성 기능에서 반환 된 상태 또는 방법을 명시 적으로 명시 해야하기 때문입니다.

 내보내기 기본값 {
  설정 () {
    const {somevar1, somemethod1} = usecomptunction1 ();
    const {somevar2, somemethod2} = usecomptunction2 ();
    반품 {
      somevar1,
      somemethod1,
      somevar2,
      somemethod2
    }
  }
}

이름 지정 충돌은 다른 JavaScript 변수와 같은 방식으로 해결됩니다.

암시 적 의존성 ... 해결되었습니다!

또한 Mixin이 구성 요소에 정의 된 데이터 속성을 사용할 수 있다는 사실을 알았으므로 코드를 깨지기 쉽고 이해하기 어렵게 만듭니다.

조합 기능은 또한 구성 요소에 정의 된 로컬 변수를 호출 할 수 있습니다. 그러나 차이점은이 변수가 이제 결합 된 기능으로 명시 적으로 전달되어야한다는 것입니다.

 "./usecomptunction"에서 usecomptionction 가져 오기;

내보내기 기본값 {
  설정 () {
    // 조합 함수에 사용해야하는 로컬 값 const mylocalval = ref (0);

    // 매개 변수로 명시 적으로 전달되어야합니다. const {...} = usecomptunction (mylocalVal);
  }
}

요약

믹스 인 모드는 표면에서 매우 안전 해 보입니다. 그러나 코드의 취약성을 증가시키고 함수를 이해하는 능력을 가리키는 방식이 증가하기 때문에 객체를 병합하여 코드를 공유하는 것이 방지가됩니다.

Composition API에 대한 가장 영리한 점은 VUE가 기본 JavaScript에 내장 된 보안 측정에 의존하여 변수를 기능 및 모듈 시스템으로 전달하는 것과 같은 코드를 공유 할 수 있다는 것입니다.

이것은 구성 API가 모든면에서 VUE의 클래식 API보다 우수하다는 것을 의미합니까? 아닙니다. 대부분의 경우 클래식 API를 고수 할 수 있습니다. 그러나 코드를 재사용 할 계획이라면 구성 API가 의심 할 여지없이 더 나은 선택입니다.

위 내용은 VUE 구성 API가 Vue Mixins를 대체하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!