Vue3 Composition API 및 새로운 기능

Vue3.0과 Typescript의 조합이 점점 더 유행하고 있습니다. 이를 사용하여 단일 파일 구성 요소를 빌드하는 방법을 확인하고 작동 방식을 이해해 봅시다.

구성 API

Vue3.0의 가장 중요한 변경 사항 중 하나는 Composition API입니다. Vue3.0은 Options API와 역호환되지만 Composition API를 사용하면 코드 공유에 더 많은 권한이 부여됩니다.

구성 API에 대한 자세한 치트 시트를 찾을 수 있습니다here.

치트시트를 살펴보면 구성 API에 대한 기본적인 이해를 할 수 있습니다.

믹스인 교체

구성 요소 간 코드 공유 개선

컴포지션 API는 Vue2.0에서 믹스인을 사용하여 다음과 같이 믹스인을 제거합니다.

import Mixin from "./Mixin.js";


export default {
  mixins: [Mixin],
  data: () => ({
    data1: null
  }),
  methods: {
    method1 () { ... }
  }
}

2016년에 Dan Abramov는 Mixins Considered Harmful 이라는 기사를 썼습니다. 그가 언급한 피해는 기본적으로 mixin을 사용하는 것이 안티 패턴이므로 권장하지 않습니다. 동일한 단점이 React와 Vue 모두에 적용됩니다.

이름 충돌

믹스인에 사용된 이름이 그것을 사용하는 파일의 이름과 충돌할 수 있음

암시적 종속성

mixin은 파일의 메서드나 속성도 사용할 수 있어 혼란을 야기합니다. 특히 리팩토링 코드 개발자가 mixin의 세부 정보를 생략하여 혼란을 야기할 수 있습니다

.


구성 API에서 구성 요소의 기능(상태, 메서드, 계산 등)을 개체 속성으로 정의하는 대신 새setup 함수에서 반환되는 JS 변수로 정의합니다.

// define reactive variable that functions pretty much the same as a data variable 
import {ref, computed } from "vue";

export default {
  setup(){
    const count = ref(0);
    const double = computed(() => count.value * 2)
    function increment(){
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
}

공통 논리를 단일 파일로 확실히 추출할 수 있지만

// useCounter.js
import { ref, computed } from "vue";


export default function () {
  const count = ref(0);
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

코드를 가져와서 다른 구성 요소에서 재사용할 수 있습니다.

// MyComponent.js
import useCounter from "./useCounter.js";

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
}

여기에서 로직의 상태 또는 메서드를 명시적으로 가져와서 사용하여 naming collision 문제를 해결해야 합니다.