Vue 3의 Composition API란?

이봐, 장인,

오늘의 블록 포스트에서는 Vue 3에 추가된 새로운 기능인 Composition API가 무엇인지 알아보겠습니다.

그 전에는 모든 로직을 단일 뷰 구성 요소에 작성해야 하는 기존 옵션 API를 사용했지만 기존 API를 사용할 때의 문제는 구성 요소의 기능이 커지면 구성 요소가 과부하되고 부피가 커져 구성 요소 로딩 문제.

이 문제는 더 읽기 쉽고 다른 보기 구성 요소에서 동일한 논리를 사용할 수 있는 구성 API의 도움으로 해결됩니다. 즉, 더 나은 배열을 제공한다고 말할 수 있습니다.

* 컴포넌트에서 Composition API를 사용하는 방법. *

우리는 props와 context를 인수로 받아들이는 setup() 메서드를 사용합니다. setup() 메서드는 컴포넌트가 생성되기 전에 실행됩니다.
코딩 섹션으로 이동하기 전에 더 많은 게시물을 보려면 저를 팔로우하세요.

[삭제 된 사용자]

전통적인 Option API와 Composition API의 간단한 예를 살펴보겠습니다.

예 1: 옵션 API - Counter.vue 파일 생성

<template>
  <div>
    <h3>Example using Traditional Option API</h3>
    <h1 class="text-6xl m-5 text-blue-600">
      {{ counter }}
    </h1>

    <p
      v-show="error"
      class="w-1/2 mx-auto my-4 p-2 border border-red-700 bg-red-600 rounded text-white"
    >
      Counter can not be decrement by {{ counter }}
    </p>
    <div class="flex flex-row justify-center w-1/2 mx-auto">
      <div class="w-1/4 mx-2">
        <button
          @click="increment()"
          type="button"
          class="border border-indigo-800 rounded bg-indigo-900 text-white p-2 w-full"
        >
          +
        </button>
      </div>
      <div class="w-1/4 mx-2">
        <button
          @click="decrement()"
          type="button"
          class="border border-red-500 rounded bg-red-500 text-white p-2 w-full"
        >
          -
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data() {
    return {
      counter: 0,
      error: false,
    };
  },
  methods: {
    increment() {
      this.counter++;
      this.error = false;
    },
    decrement() {
      if (this.counter !== 0) {
        this.counter--;
      } else {
        this.error = true;
      }
    },
  },
};
</script>

App.js에 위 구성 요소 추가

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from "./components/Counter";

export default {
  name: "App",
  components: {
    Counter,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

아래 실행 코드를 참조하십시오.



예제 2: 컴포지션 API

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1 class="text-6xl m-5 text-blue-600">
      {{ counter }}
    </h1>
    <p
      v-show="error"
      class="w-1/2 mx-auto my-4 p-2 border border-red-700 bg-red-600 rounded text-white"
    >
      Counter can not be decrement by {{ counter }}
    </p>
    <div class="flex flex-row justify-center w-1/2 mx-auto">
      <div class="w-1/4 mx-2">
        <button
          @click="increment()"
          type="button"
          class="border border-indigo-800 rounded bg-indigo-900 text-white p-2 w-full"
        >
          +
        </button>
      </div>
      <div class="w-1/4 mx-2">
        <button
          @click="decrement()"
          type="button"
          class="border border-red-500 rounded bg-red-500 text-white p-2 w-full"
        >
          -
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Counter",
  setup() {
    const msg = ref("Example of Composition API");
    const error = ref(false);
    const counter = ref(0);

    function increment() {
      counter.value++;
      error.value = false;
    }

    function decrement() {
      if (counter.value !== 0) {
        counter.value--;
      } else {
        error.value = true;
      }
    }

    return {
      msg,
      error,
      counter,
      increment,
      decrement,
    };
  },
};
</script>

이제 이 구성 요소를 App.vue에 추가합니다.

<template>
  <div>
    <Counter />
  </div>
</template>

<script>
import Counter from "./components/Counter";
export default {
  name: "App",
  components: {
    Counter,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

아래에서 컴포지션 API의 실행 코드를 볼 수 있습니다.



즐거운 독서 ❤️ 🦄