컴포지션(Composition) API

vue 3 버전이 나오면서 추가된 기능이다.
공통 함수 개발할 때 쓰는 기능이다.

Composition API를 안썼을 때

// CalculatorExample.vue
<template>
  <div>
    <input type="text" v-model.number="num1" @keyup="plusNumbers" />
    <span> + </span>
    <input type="text" v-model.number="num2" @keyup="plusNumbers" />
    <span> = </span>
    <span>{{ result }}</span>
  </div>
</template>

<script>
export default {
  name: "calculatorExample",
  components: {},
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0,
    };
  },
  methods: {
    plusNumbers() {
      this.result = this.num1 + this.num2;
    },
  },
};
</script>

<style scoped></style>

// index.js
const routes = [
  ..., // 이전 코드 생략
  {
    path: "/calculator",
    name: "Calculator",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CalculatorExample.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Compoision API 사용

Composition API_1

// CompositionAPI.vue
<template>
  <div>
    <input type="text" v-model.number="state.num1" @keyup="plusNumbers" />
    <span> + </span>
    <input type="text" v-model.number="state.num2" @keyup="plusNumbers" />
    <span> = </span>
    <span>{{ state.result }}</span>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let state = reactive({
      // reactive를 이용해서 num1, num2, result를 실시간 변경사항에 대한 반응형 적용
      num1: 0,
      num2: 0,
      result: 0,
    });

    function plusNumbers() {
      state.result = state.num1 + state.num2;
    }

    return {
      state,
      plusNumbers,
    };
  },
};
</script>

<style scoped></style>

// index.js
const routes = [
  ..., // 이전 코드 생략
  {
    path: "/compositionApi",
    name: "CompositionAPI",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CompositionAPI.vue"),
  },
];

Composition API_2 - computed 이용

// CompositionAPI2.vue
<template>
  <div>
    <div>CompositionAPI2</div>
    <p></p>
    <input type="text" v-model.number="state.num1" />
    <span> + </span>
    <input type="text" v-model.number="state.num2" />
    <span> = </span>
    <span>{{ state.result }}</span>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    let state = reactive({
      num1: 0,
      num2: 0,
      result: computed(() => state.num1 + state.num2), // computed를 이용해서 num1, num2 실시간 변경사항에 대한 반응형 적용
    });

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

<style scoped></style>

// index.js
const routes = [
  ...,
  {
    path: "/compositionApi2",
    name: "CompositionAPI2",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CompositionAPI2.vue"),
  },
];

CompositionAPI_3 - 외부 함수 사용

// CompositionAPI3.vue
<template>
  <div>
    <div>CompositionAPI3</div>
    <p></p>
    <input type="text" v-model.number="num1" />
    <span> + </span>
    <input type="text" v-model.number="num2" />
    <span> = </span>
    <span>{{ result }}</span>
  </div>
</template>

<script>
import { reactive, computed, toRefs } from "vue"; // toRefs 추가

function plusCalculator() {
  let state = reactive({
    num1: 0,
    num2: 0,
    result: computed(() => state.num1 + state.num2),
  });
  return toRefs(state); // 반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 사용하기 위해 toRefs 사용해서 return
}

export default {
  setup() {
    let { num1, num2, result } = plusCalculator(); // 외부 function

    return {
      num1,
      num2,
      result,
    };
  },
};
</script>

<style scoped></style>

// index.js
const routes = [
  ...,
  {
    path: "/compositionApi3",
    name: "CompositionAPI3",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CompositionAPI3.vue"),
  },
];

CompositionAPI_4 - 공통 함수를 import 해서 사용

// CompositionAPI4.vue
<template>
  <div>
    <div>CompositionAPI4</div>
    <p></p>
    <input type="text" v-model.number="num1" />
    <span> + </span>
    <input type="text" v-model.number="num2" />
    <span> = </span>
    <span>{{ result }}</span>
  </div>
</template>

<script>
import { plusCalculator } from "../common.js"; // toRefs 추가

export default {
  setup() {
    let { num1, num2, result } = plusCalculator(); // 외부 function

    return {
      num1,
      num2,
      result,
    };
  },
};
</script>

<style scoped></style>

// common.js
import { reactive, computed, toRefs } from "vue"; // toRefs 추가

function plusCalculator() {
  let state = reactive({
    num1: 0,
    num2: 0,
    result: computed(() => state.num1 + state.num2),
  });
  return toRefs(state); // 반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 사용하기 위해 toRefs 사용해서 return
}

export { plusCalculator };

// index.js
const routes = [
  ...,
  {
    path: "/compositionApi4",
    name: "CompositionAPI4",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CompositionAPI4.vue"),
  },
];