나는 지난 6개월 동안 Vue.js를 많이 해왔고 Vue가 굉장하다고 말할 필요가 있습니다.

저는 "React ❤️ 세계"에서 왔지만 Vue 3 및 구성 API 릴리스로 Vue에서 코드를 작성하거나 React에서 코드를 작성하는 것이 거의 동일합니다.

오늘 공유하고 싶은 것은 React 세계에서 Vue에 대한 더 많은 사랑을 가져올 RFC입니다.

환영 스크립트 설정

<script setup>는 무엇입니까? 여기에서 무슨 이야기를 하고 있습니까?

단일 파일 구성 요소 내에서 컴포지션 API를 사용할 때 저작 환경을 개선하기 위한 <script /> 태그의 컴파일 단계에 대해 설명합니다.

말이 많네요 😄 예를 들어보겠습니다. 이 구성 요소가 있다고 가정해 보겠습니다.

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc,
    }
  },
}
</script>

보시다시피 count ref가 있고 <template /> 메서드에서 반환하여 setup()로 내보냅니다.

이것은 내보내기가 거의 없거나 하나의 기능이 있지만 구성 요소가 커지고 10개 이상의 내보내기가 있을 때 그 수익이 BIG 🤯 꽤 빠르게 될 때 매우 분명합니다.

여기서 <script setup />가 도움이 될 수 있습니다. 아무 것도 반환하거나 설정 기능을 사용할 필요가 없습니다. 코드가 훨씬 깨끗하고 멋지게 보입니다.

<template>
  <button @click="inc">{{ count }}</button>
</template>

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

  export const count = ref(0)
  export const inc = () => count.value++
</script>

아름다움의 조각이 아닙니까? ❤️ 🤩 🥳
export 키워드를 사용하여 템플릿에서 사용한 것을 내보내기만 하면 끝입니다.

타이프스크립트로

하지만 내가 이것을 사용하도록 설득하고 더 사랑하게 된 것은 Typescript와의 통합입니다. 다음 예제와 props를 정의하는 방법을 살펴보세요.

<template>
  <button>{{ computedMsg }}</button>
</template>

<script setup="props" lang="ts">
import { computed } from 'vue'

declare const props: {
  msg: string
}

export const computedMsg = computed(() => props.msg + '!!!')
</script>

저 소품들 좀 보세요 🤩

지원되는 내용과 사용 방법에 대해 자세히 알아보려면 모든 경우에 대한 읽기 쉬운 예제를 찾을 수 있는 official page을 확인하십시오.

읽어주셔서 감사합니다!

내가 도울 수 있는 일이 있으면 연락해 주세요. 더 많은 기사를 보려면 내 blog를 확인하십시오.

좋은 하루 되세요!