Vue에서 옵션 API 사용 중지

Vue 3 라는 새로운 구성 요소 생성 방식을 도입했습니다. 컴포지션 API. 의 대안입니다. 옵션 API. 컴포지션 API는 완전히 선택 사항이며 다음을 사용하려는 경우 사용할 필요가 없습니다. Vue 3. 그러나 작업을 더 쉽게 만들고 가독성을 향상시키는 몇 가지 중요한 개선 사항을 소개합니다. 코드.

옵션 API에 비해 컴포지션 API의 장점

1. 코드 정리 및 가독성 향상.

컴포지션 API는 다음과 같은 새로운 메서드를 도입했습니다. 설정. 그 안에서 다음과 같이 컴포넌트에 필요한 모든 요소를 만들 수 있습니다: 데이터, 메서드, 계산된 속성, 감시자. 덕분에 특정 기능을 담당하는 로직을 한 곳에 배치하여 코드를 깔끔하게 유지할 수 있습니다. 이와 대조적으로 Options API는 로직을 파일 전체에 흩어지게 만들었습니다. 그 결과 코드를 읽을 수 없었고 스크롤이 필요했습니다. Composition API 메서드에서는 감시자 등을 더 이상 유형별로 그룹화할 필요 없이 원하는 대로 배치할 수 있습니다.

2. 로직 추출 및 재사용.

컴포지션 API를 사용하면 어디서나 반응형 코드를 작성할 수 있습니다. 컴포넌트 외부에서 일부 반응형 로직을 가져올 수 있습니다. 이러한 유형의 코드를 컴포저블. 컴포저블은 여러 컴포넌트로 가져올 수 있으며 일부 로직을 캡슐화하고 필요한 반응형 요소를 노출할 수 있습니다.

// shopping-list.js
"vue"에서 가져 오기 ( 계산됨 );

export 함수 useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId);
  const productsCount = computed(() => products.value.length);
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId);

  반환 (
    products,
    productsCount,
    deleteProduct,
  );
)

// 컴포넌트
"@/composables/shopping-list.js"에서 useSpoppingList를 임포트합니다;
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    반환 ( 제품, 제품 수, 삭제 제품 );
  ),
);

3. 컴포넌트에서 상수 및 외부 리소스를 쉽게 사용할 수 있습니다.

Options API에서 다른 파일에서 가져온 항목의 정적 목록 등을 추가하려면 데이터()에 추가하거나(성능에 부정적인 영향을 미침), 다음 위치에 추가해야 합니다. 이 in created(). 두 가지 방법 모두 그다지 우아하지 않습니다. 컴포지션 API와 새로운 설정 메서드를 사용하면 반응형 객체뿐만 아니라 상수 및 외부 종속성도 내보낼 수 있습니다.

"./list.json"에서 목록을 가져옵니다;
기본값 내보내기 (
  setup() (
    반환 ( 목록 );
  ),
);

4. Vue 2에서도 컴포지션 API를 사용할 수 있습니다.

공식 뷰/컴포지션 API 플러그인에서 컴포지션 API를 사용할 수 있습니다. Vue 2 도 마찬가지입니다.

새로운 컴포지션 API는 어떻게 사용하나요?

<h3>설정 방법</h3>

설정()에 추가된 새로운 메서드입니다. Vue 3 데이터 객체, 메소드 등 필요한 모든 항목을 넣을 수 있습니다. 여기에서 템플릿에 포함할 요소를 반환할 수 있습니다.

<template>
  <div>(( 카운트 ))</div>
</template>

"vue"에서 가져 오기 ( 참조 );
기본 내보내기 (
  setup() (
    const count = ref(10);
    반환 ( 카운트 );
  ),
);

반응형()

반응형 객체 또는 배열을 생성하려면 다음과 같이 생성해야 합니다. 반응형(기본값) 메서드. 메서드 인수를 통해 이 객체의 초기 값을 전달할 수 있습니다. 이 메서드는 프록시 이 객체에 대해 변경할 수 있습니다, Vue 는 이러한 정보를 알고 뷰를 제대로 새로 고칠 수 있습니다.

컴포지션 API

"vue"에서 ( 반응형 ) 가져오기;
기본 내보내기 (
  setup() (
    const user = reactive((
      name: "John",
      role: "ADMIN",
    ));
    반환 ( 사용자 );
  ),
);

옵션 API

기본값 내보내기 (
  data() (
    반환 (
      user: (
        name: "John",
        role: "ADMIN",
      ),
    );
  ),
);

Reactive 만 는 객체 유형(객체, 배열, 컬렉션 유형 등)에 대해 작동합니다. 지도 그리고 설정). 다음과 같은 원시 유형은 보유할 수 없습니다. 문자열, 숫자 또는 부울. 따라서 Vue는 ref().

ref()

원시 요소에 반응성을 추가하려면 다음과 같이 래핑해야 합니다. ref().

컴포지션 API

"vue"에서 가져 오기 ( 참조 );
기본 내보내기 (
  setup() (
    const count = ref(10);
    반환 ( 카운트 );
  ),
);

옵션 API

기본값 내보내기 (
  data() (
    반환 (
      count: 10,
    );
  ),
);

반응형 객체 수정하기

반응형 메서드에서 객체의 값을 직접 변경할 수 있지만, 원시 값을 변경하려면 .value 필드에 입력합니다.

"vue"에서 ( ref, reactive ) 가져오기;
기본 내보내기 (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // 값 변경

    const count = ref(10);
    count.value = 20; // 값 변경

    반환 (
      user,
      count,
    );
  ),
);

당신 하지 마십시오. 를 사용해야 합니다. .value 속성을 템플릿에 추가합니다.

<div>(( 카운트 ))</div>

계산된 속성

임포트된 메서드에 파라미터로 메서드를 전달하여 계산된 프로퍼티를 쉽게 만들 수 있습니다. computed() 메서드를 사용합니다.

"vue"에서 ( 반응형, 계산형 ) 가져오기;
기본값 내보내기 (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2",
    ]);

    // 계산된
    const isEmpty = computed(() => list.length === 0);

    반환 (
      list,
      isEmpty,
    );
  ),
);

방법

메서드를 중첩할 수도 있습니다. 설정 메서드를 사용합니다.

컴포지션 API

"vue"에서 가져 오기 ( 참조 );
기본 내보내기 (
  setup() (
    const count = ref(10);

        // 메서드
    const increment = () => (
      count.value++;
    );

    반환 (
      count,
      increment,
    );
  ),
);

감시자

감시자는 다음과 비슷한 방식으로 만들어집니다. 계산. 그러나 프록시 객체즉 이름가 아닌 아래 예제에서와 같이 name.value 값 자체입니다.

"vue"에서 가져 오기 ( watch, ref );
기본 내보내기 (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`값이 $(oldValue)에서 $(currentValue)로 변경되었습니다`);
    ));
    반환 ( 이름 );
  ),
);

요약

이 글에서는 컴포넌트 API가 옵션 API와 어떻게 다른지, 어떤 장점이 있는지 전반적으로 이해할 수 있도록 컴포넌트 API의 기본 사항만 설명했습니다. 컴포지션 API는 다음과 같은 나머지 컴포넌트 요소에 대한 대안도 제공합니다. 후크와 같은 새로운 방법을 소개합니다. watchEffect. 공식 문서에서 읽어보는 것이 좋습니다. Vue 3 문서.