Vue 3 - 엉망진창...

저는 지난 몇 년 동안 VueJS의 열렬한 팬이었습니다. Vue를 사용하여 매우 높은 수준의 효율성으로 웹 애플리케이션을 만들 수 있었습니다.

오늘 Vue 3를 사용하려는 첫 번째 시도에서 간단한 확인란 하나를 만들기 위해 약 5시간 동안 Vue 3와 씨름했습니다.

아이디어는 간단했습니다.
FAST과 같은 checkbox 컴포넌트를 가져와 새로운 Vue3 앱에서 쉽게 사용할 수 있도록 래핑합니다.

Microsoft가 이러한 깔끔한 구성 요소를 만든 다음 Vue에서 실제로 사용할 수 있는 방법을 제공하지 않은 이유는 약간 정신이 아찔하지만 저는 수천 개의 Vue(2) 구성 요소를 만들었습니다. 한 조각의 케이크라고 해야 할까요?

좋아... 빠른 시작 지침에 따라 새 Vue3 프로젝트를 시작하겠습니다. 그런 다음 열어서 주변을 살펴보십시오.



이게 대체 뭐야?

Vue's Guide의 모든 코드는 다음과 같습니다.



구성 요소의 코드는 Vue 권장 방법으로 방금 만든 새 프로젝트에서 얻은 것과 100% 다릅니다. (새 프로젝트의 모든 곳에 빨간색 squiqqly 선이 있는 Typescript를 선택하면 상황이 더욱 악화됩니다!)

사용자가 스타터 프로젝트에서 새로운 Composition API로 시작하도록 하고 문서에서 Options API에 초점을 유지함으로써 Vue는 프레임워크를 처음 접하는 개발자에게 큰 혼란을 주고 있습니다.
이 단일 불일치로 인해 수천 명의 개발자가 좌절하고 대신 다른 프레임워크를 시도하게 될 것입니다.

기본 스타터 프로젝트는 문서와 같아야 합니다!

나는 겸손한 확인란을 만들기 위해 몇 시간 동안 Composition API를 사용하려고 노력했습니다. 그러나 소품을 보는 것과 같은 간단한 일조차도 매우 어려운 것으로 판명되었습니다.

나는 결국이 페이지를 찾았습니다 : https://vuejs.org/api/

불행히도, Vue에 대한 나의 확신은 이 시점에서 끔찍하게 흔들립니다.

추신 확인란이 작동하도록 했습니다(예, 5시간 넘게 걸렸습니다!)

<script setup lang="ts">
import type { Checkbox } from "@microsoft/fast-foundation";
import { watch, ref, onMounted } from "vue";

// Why can't I just do this?
// let checked = false;

// This looks pretty ugly, but it defines our emit for v-model (passes internal changes up to the v-model)
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// This is ugly too, but it defines the prop for v-model (brings external changes in from v-model)
const props = defineProps<{
  modelValue: boolean;
}>();

// Maintain internal state with a ref
const checked = ref<boolean>(props.modelValue);

// Ok, if you thought the stuff above was ugly, take a look at this.
// Who in their right mind can read this and figure out what is
// going on here.
watch(
  () => props.modelValue,
  (newValue) => {
    if (checked.value != newValue) {
      checked.value = newValue;
    }
  }
);

// When the native fluent-checkbox changes it's value, sync to internal state and v-model
const onChange = (change: CustomEvent) => {
  if (change?.target) {
    // Gotta love having to do this funky cast...
    checked.value = (change.target as Checkbox).checked;
    emit("update:modelValue", checked.value);
  }
};
</script>

<template>
  <fluent-checkbox @change="onChange" :checked="checked">
    <slot></slot>
  </fluent-checkbox>
</template>