Composition API로 Vue 3 앱 만들기 — 읽기 전용 속성 및 부작용

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue 3에는 Composition API가 내장되어 있습니다.

코드에서 this 값에 대해 걱정할 필요 없이 쉽게 논리를 추출할 수 있습니다.
this 값을 더 이상 입력할 필요가 없기 때문에 TypeScript에서도 더 잘 작동합니다.

이 기사에서는 Composition API를 사용하여 Vue 3 앱을 만드는 방법을 살펴보겠습니다.

읽기 전용 속성

구성 API를 사용하여 Vue 3 앱에 읽기 전용 속성을 추가할 수 있습니다.

추가하기 위해 readonly 속성을 사용합니다.

<template>
  <div>{{ copy }}</div>
</template>

<script>
import { reactive, readonly } from "vue";
export default {
  name: "App",
  setup() {
    const original = reactive({ count: 0 });
    const copy = readonly(original);
    return {
      copy,
    };
  },
};
</script>

original 로 reactive 반응성 속성을 정의합니다.

그런 다음 readonly와 함께 original를 호출하여 원본의 읽기 전용 전체 복사본을 만듭니다.

그리고 우리는 그것을 사용할 수 있도록 반환합니다.

반응성 속성 보기

watchEffect 메서드로 반응성 속성을 볼 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    watchEffect(() => console.log(count.value));

    setTimeout(() => {
      count.value++;
    }, 100);

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

watchEffect 콜백에서 업데이트될 때 count 값을 기록하기 위해 콜백으로 setTimeout를 호출합니다.
watchEffect는 감시자를 중지하는 데 사용할 수 있는 함수를 반환합니다.

그것을 사용하기 위해 다음과 같이 작성합니다.

<template>
  <div>{{ count }}</div>
</template>

<script>
import { onBeforeUnmount, ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const stop = watchEffect(() => console.log(count.value));

    setTimeout(() => {
      count.value++;
    }, 100);

    onBeforeUnmount(() => stop());

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

컴포넌트를 마운트 해제할 때 감시자를 중지하기 위해 stop 콜백에서 onBeforeUnmount를 호출합니다.

또한 onInvalidate 함수로 부작용을 무효화할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

<template>
  <div>{{ size }}</div>
</template>

<script>
import { onBeforeMount, reactive, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const size = reactive({
      width: 0,
      height: 0,
    });

    const onResize = () => {
      size.width = window.innerWidth;
      size.height = window.innerHeight;
    };
    onBeforeMount(() => window.addEventListener("resize", onResize));

    watchEffect((onInvalidate) => {
      onInvalidate(() => {
        window.removeEventListener("resize", onResize);
      });
    });

    return {
      size,
    };
  },
};
</script>

window.removeEventListener를 호출하여 onInvalidate 콜백에서 이벤트 리스너를 제거합니다.
onResize 함수는 size 이벤트에 대한 리스너로 첨부하여 화면을 변경할 때 resize를 설정합니다.

결론

Vue 3의 구성 API를 사용하여 읽기 전용 속성을 추가하고 부작용을 볼 수 있습니다.