Vue3+TS+Vite 개발 팁: Vue3 Composition API를 우아하게 사용하는 방법

Vue3+TS+Vite 개발 기술: Vue3 Composition API를 우아하게 사용하는 방법

소개:
Vue3의 출시는 프런트엔드 개발에 일련의 변화를 가져왔고, 가장 큰 변화 중 하나는 Composition의 도입입니다. API(컴포저블 API). 기존 옵션 API와 비교하여 Composition API를 사용하면 코드를 보다 유연하고 효율적으로 구성하고 관리할 수 있습니다. 이 기사에서는 Vue3 Composition API를 우아하게 사용하고 프로젝트 개발을 위해 TypeScript와 Vite를 결합하는 방법을 소개합니다.

1. 프로젝트 설치 및 초기화
먼저 Vue CLI의 최신 버전을 설치해야 하며, 다음 명령을 통해 설치해야 합니다.

npm install -g @vue/cli

다음으로 Vue CLI를 사용하여 새 프로젝트를 생성할 수 있습니다.

vue create my-project

프로젝트를 생성하면서 TypeScript를 프로젝트 템플릿으로 선택할 수 있습니다. 선택의 여지가 없다면 TypeScript 지원을 수동으로 추가할 수도 있습니다:

vue add @vue/typescript

다음으로 Vite를 프로젝트의 빌드 도구로 사용하고 다음 명령을 통해 설치할 수 있습니다:

npm init vite@latest my-vite-project -- --template vue-ts

이런 식으로 성공적으로 설치하고 초기화했습니다. Vue3+TS +Vite의 프로젝트입니다.

2. Composition API 사용
Composition API를 사용하면 코드를 더 잘 구성하고 개발 효율성을 높일 수 있습니다. 다음은 Composition API를 사용하는 방법을 보여주는 간단한 예입니다.

1. 새 구성 요소 만들기
   먼저 HelloWorld.vue와 같은 새 구성 요소를 만들 수 있습니다.

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, World!');
   
    onMounted(() => {
      setTimeout(() => {
        message.value = 'Hello, Vue3!';
      }, 2000);
    });
   
    return {
      message,
    };
     },
   };
   </script>

이 예에서는 Composition API의 ref 함수를 사용하여 반응형 데이터 메시지를 정의하고 메시지의 값은 구성요소의 마운트된 후크 기능에서 수정됩니다.

2. 구성 요소 사용
   다음으로 페이지에서 이 구성 요소를 사용합니다.

   <template>
     <div>
    <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './HelloWorld.vue';
   
   export default {
     components: {
    HelloWorld,
     },
   };
   </script>

HelloWorld 구성 요소를 페이지에 도입하여 하위 구성 요소로 사용합니다.

3. 프로젝트 실행
   마지막으로 프로젝트를 실행하고 효과를 확인할 수 있습니다.

   npm run dev

이 간단한 예를 통해 Composition API를 사용하면 코드를 더 간결하고 명확하게 구성할 수 있음을 알 수 있습니다.

3. 일반적으로 사용되는 Composition API 함수
위에 소개된 ref 및 onMounted 함수 외에도 더 나은 개발에 도움이 되는 몇 가지 일반적으로 사용되는 Composition API 함수가 있습니다.

1. 반응형 함수
   반응형 함수는 일반 개체를 반응형 개체로 변환하고 반응형 프록시 개체를 반환할 수 있습니다. 예제는 다음과 같습니다.

   import { reactive } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   console.log(state.count); // 输出：0
   
   state.count++;
   console.log(state.count); // 输出：1

위 예제에서는 Reactive 함수를 사용하여 일반 객체 상태를 Reactive 객체로 변환하고, state.count를 통해 이에 접근하고 수정합니다.

2. watch 함수
   watch 함수는 반응형 데이터의 변화를 모니터링하고, 데이터가 변경되면 해당 콜백 함수를 실행할 수 있습니다. 예시는 다음과 같습니다.

   import { ref, watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count从${oldValue}变为${newValue}`);
   });
   
   count.value++; // 输出：count从0变为1

위 예시에서는 watch 함수를 사용하여 카운트 변수의 변화를 모니터링하고, 카운트가 변경되면 해당 로그를 출력합니다.

3. toRefs 함수
   toRefs 함수는 반응형 개체의 속성을 일반 참조 개체로 변환하고 새 개체를 반환할 수 있습니다. 예는 다음과 같습니다.

   import { reactive, toRefs } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   const { count } = toRefs(state);
   
   console.log(count.value); // 输出：0
   
   count.value++;
   console.log(count.value); // 输出：1

위 예에서는 toRefs 함수를 사용하여 상태의 count 속성을 일반 ref 객체로 변환하므로 count.value를 통해 액세스하고 수정할 수 있습니다.

4. 요약
Vue3 Composition API의 도입으로 코드가 더욱 유연하고 효율적이게 되었고, 코드를 더 잘 구성하고 관리할 수 있게 되었습니다. 이 기사에서는 Vue3 Composition API를 사용하고 TypeScript 및 Vite를 사용하여 Vue3 프로젝트를 개발하는 방법을 소개합니다. Composition API의 사용을 이해하고 마스터함으로써 Vue3 프로젝트를 보다 우아하게 개발하고 개발 효율성을 향상시킬 수 있습니다.

이 기사가 Vue3 프로젝트 개발에서 Composition API를 사용하는 데 도움과 지침을 제공할 수 있기를 바랍니다.

위 내용은 Vue3+TS+Vite 개발 팁: Vue3 Composition API를 우아하게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!