defineComponent 대

소개

Vue 3의 생성과 함께 커뮤니티는 Composition API라고 하는 구성 요소 구조를 구성하는 새롭고 보다 기능 지향적인 방식을 도입했습니다.

Options API로 명명된 이전 방식은 this 키워드에 크게 의존하는 객체 지향 접근 방식에 더 가깝습니다.

옵션 API

두 방법 모두 일반적인 사용 사례를 완벽하게 다룰 수 있지만 옵션 API가 사용되었지만 더 큰 그림에서는 반응성 세부 정보를 추상화하고 옵션 그룹을 통해 코드 구성을 시행하기 때문에 개발자를 심각하게 제한했습니다.

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

<script>
export default {
  // Properties returned from data() become reactive state and will be exposed on this.
  data() {
    return {
      count: 0
    }
  },
  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },
  // Lifecycle hooks are called at different stages of a component's lifecycle.
  // This will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${count.value}.`)
  }
}
</script>

구성 API

Composition API는 함수 범위에서 직접 반응 상태 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는 데 중점을 둡니다.

보다 자유로운 형식이며 효과적으로 사용하려면 Vue에서 반응성이 어떻게 작동하는지 이해해야 합니다.

그 대가로 그 유연성은 논리를 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 합니다.

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

<script>
import { ref, onMounted, defineComponent } from "vue";

export default defineComponent({
  setup() {
    // Reactive state
    const count = ref(0);

    // Functions that mutate state and trigger updates
    function increment() {
      count.value++;
    }

    // Lifecycle hooks
    onMounted(() => {
      console.log(`The initial count is ${count.value}.`);
    });

    return {
      count,
      increment
    };
  }
});
</script>

템플릿에서 사용해야 하는 데이터는 매우 장황한 defineComponent 함수의 반환 값을 통해 수동으로 노출되어야 하지만 전송되는 내용을 보다 명확하게 파악할 수 있습니다.

<스크립트 설정>

또한 구문 설탕의 형태로 Composition API에 또 다른 옵션인 설정 지시문이 추가되었습니다.

이를 통해 개발자는 defineComponent 함수의 추가 상용구 없이 최상위 수준 문을 작성할 수 있습니다.

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

이전 항목과 달리 모든 것이 템플릿에 노출되어 실제로 템플릿에 있어야 할 항목을 관리하기 어려울 수 있지만 상용구가 줄어들어 이 구문이 이를 보완합니다.

소품 및 방출

defineComponent 접근 방식은 구성 요소의 속성이 정의되는 props 속성과 같이 작동 방식이 장황하고 매우 명시적입니다.

<template>
  <span>
    {{ title }}
  </span>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
      required: false
    }
  },
  setup(props) {
    return {};
  }
});
</script>

제목 소품은 템플릿에서 즉시 사용할 수 있으며 스크립트에서 사용해야 하는 경우 설정 함수의 매개변수를 통해 노출됩니다.

defineProps 함수를 사용하여 설정 지시문에서도 동일한 작업을 수행할 수 있습니다.

<template>
  <span>
    {{ title }}
  </span>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
    required: false
  }
});
</script>

템플릿에 props.title을 명시적으로 작성할 필요가 없다는 점에 유의하십시오.

스크립트에서 제목을 사용해야 하는 경우 defineProps 함수는 앞서 언급한 prop과 함께 반응 객체를 반환합니다.

defineProps 매크로는 설정 지시문을 사용하는 경우 기본적으로 사용할 수 있습니다.

동일한 원칙이 이벤트 방출에 적용됩니다.

<script>
import { defineComponent } from "vue";

export default defineComponent({
  emits: ["update:value"],
  setup(props, { emit }) {
    emit("update:value");
    return {};
  }
});
</script>

설정 지시문을 사용하지 않을 때는 설정 함수 매개변수를 통해 방출 함수를 노출해야 합니다.

<script setup>
  const emit = defineEmits(["update:value"]); emit("update:value");
</script>

그러나 이 경우 defineEmits 매크로만 필요합니다. 반환 값은 이벤트를 내보내는 데 사용할 수 있는 함수입니다.

비교

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

<script>
import { ref, onMounted, defineComponent } from "vue";

export default defineComponent({
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log(`The initial count is ${count.value}.`);
    });

    return {
      count,
      increment
    };
  }
});
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

이전 코드 블록을 나란히 비교하면 상용구가 약간 감소한 것을 볼 수 있습니다. 정확히 29줄 대 20줄, 45% 감소!

결론

defineComponent 접근 방식과 설정 매크로 접근 방식은 기능 면에서 동일하지만 설정 방식이 다릅니다.

하나는 장황하고 다른 하나는 그렇지 않습니다. 보다 명시적인 코드가 필요하면 defineComponent를 사용하는 것이 좋습니다.

그러나 설정을 사용하면 많은 상용구가 제거되고 최상위 코드가 표준이 됩니다.

개인적인 선택에 따라 설정 구문 설탕을 사용합니다.