Vue의 v-on 객체 구문을 사용하는 이유는 무엇입니까?

코딩은 주관적이며 항상 여러 가지 방법으로 작업을 수행할 수 있습니다. 일반적으로 프레임워크는 독단적이며 일부 규칙이 있으며 일부 형식은 다른 형식보다 더 일반적으로 허용됩니다. 여기서는 Vue에서 이벤트를 구성하는 방법과 그 근거를 제시합니다.

나는 정적 타이핑의 열렬한 팬이며 그것이 보다 즐거운 개발 경험을 갖는 데 도움이 될 수 있다고 굳게 믿습니다. 코드가 더 강력한지 아닌지 논쟁하지 않을 것입니다. 코드 추상화를 쉽게 형성할 수 있습니다. 두 가지 모두 즐거운 코딩 경험과 관련이 있습니다. 여기서 아이디어는 typescript로 더 잘 구현될 수 있지만 일반 자바스크립트에서도 똑같이 유용하다는 것을 알았습니다.

이벤트에 문자열을 사용한 다음 리스너에 대한 @ 바로 가기 표기법을 사용하는 대신. 개체 또는 열거형을 만들고 거기에 있는 모든 이벤트를 사전으로 만든 다음 사전 값을 키로, 수신기를 값으로 갖는 다른 개체를 만드는 것이 좋습니다. 이것의 단점은 @event 를 사용하는 것보다 조금 더 장황하다는 것입니다.

Vue의 문서에서는 API 섹션의 v-on에 대한 개체 구문 아래에 나타납니다. 코드에서 다음과 같습니다.

<template>
  <some-vue-component
    v-on="someVueComponentListeners"
  />
</template>
<script>
  // This should be part of SomeVueComponent SFC
  const SomeVueComponentEvents = {
    CLICK: 'click',
    CUSTOM_EVENT: 'custom-event'
  };
  // We assume somewhere inside of it there is a:
  // this.$emit(SomeVueComponentEvents.CLICK);
  // this.$emit(SomeVueComponentEvents.CUSTOM_EVENT);
  const someVueComponentListeners = {
    [SomeVueComponentEvents.CLICK]: () => { /* do something */},
    [SomeVueComponentEvents.CUSTOM_EVENT]: () => { /* do something */},
  };
</script>

일관된 검색

이러한 이벤트 처리 방법의 첫 번째 장점은 검색이 매우 쉽다는 것입니다. 이미터와 리스너 모두 동일한Object.Key 표기법을 가집니다.

로직을 스크립트 섹션으로 이동

모든 논리는 SFC의 스크립트 섹션에서 사용할 수 있습니다. 아마 여전히 때때로 템플릿을 확인해야 하지만 이제 어떤 핸들러가 어떤 이벤트에 해당하는지 확인하기 위해 템플릿으로 이동할 필요가 없습니다.

더 간결한 템플릿

이전 요점의 결과로 이제 구성 요소 태그가 정리되어 많은 핸들러가 있는 컨테이너 구성 요소에서 특히 볼 수 있습니다. 이제 어떤 처리기가 구현되었는지 템플릿에서 더 이상 알 수 없습니다(사용 중인 IDE에 따라 볼 수 있으며 VS Code IntelliSense에서 이 정보를 제공함).


읽어 주셔서 감사합니다. 귀하의 생각과 의견을 기꺼이 읽겠습니다. 이 게시물이 흥미로웠다면 여기 또는 Twitter에서 저를 팔로우해 주세요.