vue composition api는 이름 경합을 어떻게 해결합니까?

vue composition api는 이름 경합을 어떻게 해결합니까?

composition api는 mixin에 의해 야기된 명명 충돌을 해결한다고 합니다.

이것이 제가 인터넷에서 찾은 컴포지션 API입니다.

export default {
  setup () {
    const { someVar1, someMethod1 } = useCompFunction1();
    const { someVar2, someMethod2 } = useCompFunction2();
    return {
      someVar1,
      someMethod1,
      someVar2,
      someMethod2
    }
  }
}

그런 것 같다.useCompFunction1()그리고.useCompFunction2믹스인 같아요.이 예에서는 모든 것이 좋지만, 만약 그렇다면.useCompFunction1()그리고.useCompFunction2()같은 이름의 변수를 사용하면 두 변수를 모두 사용할 수 없기 때문에 위의 코드에 문제가 있을 수 있습니다.그래서 물론 이름 짓기 충돌은 여전히 존재합니다.그럼 왜 이름 충돌은 Composition API로 해결된다고 하는 건가요?

갱신:

제가 제공한 예시는 재사용 가능한 코드를 어떻게 작성해야 하는지 제가 발견한 코드입니다.

import { ref, computed } from "vue";


export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

보시는 바와 같이 이 명령어는 다음과 같은 변수를 반환합니다.count,double,increment이 기능을 사용하려면 발신자가 이름을 알아야 합니다.그래서, 변수들의 이름을 정하는 것은 여전히 구성이다.감 잡히는 게 없어요?

가장 큰 차이점은mixin그리고 구성 함수는mixin변수 이름을 결정하지만 합성 함수를 사용하면 합성 함수가 제공하는 결과에서 사용자가 할당한 변수의 이름을 결정합니다.

예제:

const { someVar1, someMethod1 } = useCompFunction1();
const { someVar1, someMethod1 } = useCompFunction2();

.....대부분의 IDE는 이미 존재하는 변수를 선언하고 있기 때문에 이것이 올바르지 않다고 말합니다.

요점은, 그 안에 있는 변수 이름들은 중요하지 않다는 것이다.useCompFunction1또는useCompFunction2로컬 변수이기 때문입니다.하지만 사용하려면 자체 변수를 선언하고 구성 함수 결과에서 할당해야 합니다.따라서 변수 이름을 결정합니다.사용하고 있는 '변수'가 아니라...

갱신하다

그래서, 변수들의 이름을 결정하는 것은 여전히 구성이다.

아니, 너야!

현재 결과를 사용하는 경우:

const comp1 = useCompFunction1();

...선택한 이름으로 결과를 사용합니다.

console.log(comp1.count)

단, 파괴를 사용하기로 선택한 경우에도 다음과 같이 변수의 이름을 변경할 수 있습니다.

const { count: count1, double: double1, increment: increment1 } = useCompFunction1();

...변수를 사용할 수 있게 되었습니다.count1,double1그리고.increment1적합하다고 생각하시는 바와 같이...

변수 이름을 변경할 수 있습니다. 예를 들어, 두 변수 모두useCompFunction1()그리고.useCompFunction2()돌아온다testVar변수:

const { testVar: testVar1, someMethod1 } = useCompFunction1();
const { testVar: testVar2 } = useCompFunction2();

언급URL : https://stackoverflow.com/questions/64773093/vue-composition-api-how-does-it-solve-naming-conflicts