Vue 3는 저를 흥미에서 흥분으로 만들었습니다.

Vue 3는 한동안 내 레이더에 있었지만 최근 RFC는 저를 "관심"에서 "흥분"으로 이끌었습니다.

특히 구성 요소 선언에 대해 이야기하고 있습니다.

이것은 일반적으로 Vue 2에서 수행하는 방법입니다.

<template>
  <div>{{ hello }}</div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'world'
    }
  }
}
</script>

Vue 3(아직 출시되지 않음)에는 구성 API가 도입되었습니다. 이를 통해 옵션에 분산되지 않고 논리를 결합할 수 있습니다.

이에 대한 나의 첫 반응은 다음과 같습니다. 멋지네요. 복잡한 구성 요소에 유용할 것이지만 필요하지 않은 경우에는 이전 구성을 고수할 것입니다.

결국 위의 구성 요소는 다음과 같습니다.

<template>
  <div>{{ hello }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const hello = ref('world')

    return {
      hello
    }
  }
}
</script>

이제 이 간단한 구성 요소가 많이 변경되었습니다. 맞습니까? 실제로는 더 커졌습니다.


이제 요전에 새로운 RFC가 GitHub에 게시되었습니다. "설정"을 사용하면 일반적으로 메서드, 계산, 데이터 및 수명 주기 후크가 더 이상 필요하지 않으므로 "스크립트"를 설정하면 겉보기에 불필요한 오버헤드가 발생합니다.

따라서 이 새로운 제안을 통해 내부에서 직접 설정 방법을 사용하여 작업할 수 있습니다<script>.

<template>
  <div>{{ hello }}</div>
</template>

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

export const hello = ref('world')
</script>

This might look a little alien, but think about it. In Vue 2, we exported an entire object using export default for the template to use. With <script setup> we export individual parts for the template to use.

약간의 상태를 추가하는 데 필요한 모든 들여쓰기와 함께 Vue에서 구성 요소를 설정하는 것은 항상 약간 지루했습니다. 이 svelte-react-mix는 이 문제를 완전히 제거합니다.

이제 귀하가 요청할 수 있는 구성 요소를 어떻게 등록합니까? 이것은 또한 DX 부스트를 얻었습니다. 가져오기 및 등록하는 대신 두 단계를 하나로 병합했습니다. 이 모든 것에 대해 여전히 약간의 논쟁이 있는 것 같지만 자세한 내용은 RFC를 확인하십시오.

RFC: https://github.com/vuejs/rfcs/pull/182