Vue 3 및 Vue 2의 코딩, 성능 최적화 및 생태계 개선에 대한 포괄적인 가이드

요약: Vue.js는 널리 사용되는 JavaScript 프레임워크이며 최신 버전인 Vue 3은 이전 버전인 Vue 2와 여러 면에서 다릅니다. 이 블로그에서는 Vue 2와 일치하지 않는 Vue 3의 코딩 방법에 중점을 둘 것입니다. Vue 3에 도입된 새로운 기능, 구문 변경 및 최적화를 살펴보겠습니다. 이러한 변경 사항을 자세히 비교함으로써 Vue 3를 더 잘 마이그레이션하고 사용하는 방법을 이해할 것입니다.

1. 소개

Vue 3에서는 Composition API가 Options API의 보완 및 확장으로 도입되었습니다. Composition API는 코드를 구성하는 보다 유연하고 구성 가능한 방법을 제공하도록 설계되었습니다. Composition API와 Options API 간의 불일치는 아래에 자세히 설명되어 있습니다.

1. 컴포지션 API

Composition API는 Vue 3의 새로운 기능입니다. 이는 코드 로직을 구성하고 재사용하는 기능적 API 세트를 제공합니다. 옵션 API와 비교하여 Composition API는 더 유연하고 유지 관리가 용이하며 특히 복잡한 비즈니스 논리 및 구성 요소 간의 공유 논리를 처리하는 데 적합합니다.

Composition API의 주요 기능은 다음과 같습니다.

• 함수를 사용하여 로직 구성: 관련 로직을 함수에 따라 캡슐화하고 함수를 통해 재사용합니다.
• 정확한 로직 조합: 고정된 선언 순서를 따르지 않고 필요에 따라 다양한 기능의 로직을 결합할 수 있습니다.
• 더 나은 코드 재사용성: 로직을 사용자 정의 함수로 추출하고 구성 요소에서 참조하고 호출할 수 있습니다.
• 더 나은 유형 추론 및 편집기 지원: 기능적 프로그래밍 덕분에 편집기는 유형을 더 효과적으로 추론하고 코드 완성을 제공할 수 있습니다.

다음은 Composition API를 사용하는 예입니다.

import {
    
     reactive, computed } from 'vue';

export default {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0,
    });

    const increment = () => {
    
    
      state.count++;
    };

    const doubledCount = computed(() => {
    
    
      return state.count * 2;
    });

    return {
    
    
      state,
      increment,
      doubledCount,
    };
  },
};

2. 옵션 API

옵션 API는 Vue 2에서 구성 요소를 작성하는 데 일반적으로 사용되는 방법입니다. 옵션 개체를 선언하여 구성 요소의 다양한 속성, 메서드 및 수명 주기 후크를 정의합니다. Composition API에 비해 Options API는 간단한 컴포넌트를 작성하거나 초보자에게 더 적합합니다.

옵션 API의 주요 기능은 다음과 같습니다.

• 옵션 개체 기반: 다양한 옵션이 포함된 개체를 사용하여 구성 요소의 다양한 측면을 정의합니다.
• 선언적 라이프사이클 후크: 사전 정의된 라이프사이클 후크 기능을 통해 구성요소 라이프사이클 이벤트를 처리합니다.
• 데이터와 메서드는 동일한 개체에 정의됩니다. 구성 요소의 데이터와 메서드는 옵션 개체의 속성에 정의됩니다.
• 객체 내부의 컨텍스트 액세스: this 키워드를 통해 구성 요소 내부의 구성 요소 컨텍스트에 액세스할 수 있습니다.

다음은 옵션 API를 사용하는 예입니다.

export default {
    
    
  data() {
    
    
    return {
    
    
      count: 0,
    };
  },
  methods: {
    
    
    increment() {
    
    
      this.count++;
    },
  },
  computed: {
    
    
    doubledCount() {
    
    
      return this.count * 2;
    },
  },
};

요약:
Composition API는 Options API에 대한 보완으로 Vue 3에 도입되었습니다. Composition API는 복잡한 비즈니스 논리와 구성 요소 간의 공유 논리를 처리하는 데 적합한 보다 유연하고 구성 가능한 코드 작성 방법을 제공합니다. 그리고 옵션 API

간단한 컴포넌트를 작성하거나 초보자에게 더 적합합니다. 마이그레이션 프로젝트나 새 프로젝트에서 필요에 따라 적절한 API를 선택하여 Vue 구성 요소를 작성할 수 있습니다.

2. 템플릿 구문

Vue 3에는 템플릿 구문 측면에서 Vue 2와 일부 불일치가 있습니다. 다음은 v-model 지시어, 템플릿의 속성 바인딩, 동적 구성 요소의 변경 사항을 각각 소개합니다.

1. v-model 지시어:

Vue 2에서는 v-model 지시문을 사용하여 양식 요소와 구성 요소 간의 양방향 바인딩을 구현합니다. Vue 3에서는 v-model 지시문의 동작이 변경되었습니다. Vue 3의 v-model 지시어는 주로 props와 컴포넌트 내보내기 간의 양방향 바인딩에 사용됩니다.

v-model 지시문을 사용할 때 구성 요소의 props에 modelValue 속성을 정의하고 내보내기 이벤트에서 update:modelValue를 사용하여 속성을 업데이트해야 합니다. 구체적인 사용법은 다음과 같습니다.

<template>
  <custom-input v-model="value"></custom-input>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      value: '',
    };
  },
};
</script>

CustomInput 컴포넌트에서는 props를 통해 modelValue를 전달받아야 하며, input box의 input 이벤트에 $emit('update:modelValue', newValue)를 사용하여 상위 컴포넌트의 값을 업데이트해야 합니다.

2. 템플릿의 속성 바인딩:

Vue 2에서는 v-bind 지시문이나 약식 콜론 구문을 사용하여 속성 바인딩을 수행할 수 있습니다. Vue 3에서는 콜론 구문이 약간 다르게 작성되었으며 속성을 명시적으로 바인딩하려면 v-bind 지시문을 사용해야 합니다.

Vue 2의 속성 바인딩 예:

<template>
  <div :class="{ active: isActive }"></div>
  <input :value="message">
</template>

Vue 3의 속성 바인딩 예:

<template>
  <div v-bind:class="{ active: isActive }"></div>
  <input v-bind:value="message">
</template>

Vue 3에서는 v-bind를 접두사 기호(예: @, :, # 등)로 축약하여 속성 바인딩의 축약된 형식을 사용할 수도 있으며 다음에 따라 적절한 접두사 기호를 선택할 수도 있습니다. 구체적인 목적..

3. 동적 구성요소:

Vue 2에서는 요소와 속성을 사용하여 동적 구성 요소 전환을 달성할 수 있습니다. Vue 3에서는 동적 구성 요소를 작성하는 방식이 일부 변경되었습니다.

Vue 2의 동적 구성요소 예:

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

Vue 3의 동적 구성 요소 예:

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: ComponentA,
    };
  },
  components: {
    ComponentA

,
    ComponentB,
  },
};
</script>

Vue 3에서는 컴포넌트의 이름 문자열을 사용하지 않고 컴포넌트 객체를 currentComponent의 값으로 직접 사용할 수 있습니다.

요약:
Vue 3에서는 v-model 지시문의 사용법이 변경되었으며 주로 props와 컴포넌트 내보내기 간의 양방향 바인딩에 사용됩니다. 템플릿의 속성 바인딩에는 v-bind 지시문을 사용한 명시적인 속성 바인딩이 필요하며, 구문을 단순화하기 위해 다양한 접두사 기호를 사용하도록 선택할 수 있습니다. 동적 구성 요소의 작성 방법은 Vue 3에서 일관되게 유지됩니다. 구성 요소 개체를 is 속성에 직접 할당하기만 하면 됩니다. 이러한 변경으로 인해 Vue 3에서는 템플릿 구문이 더욱 유연해지고 사용하기 쉬워졌습니다.

3. 대응 시스템

Vue 3의 반응형 시스템에는 Vue 2와 일부 불일치가 있습니다. 다음에서는 Ref 및 Reactive, Computed 및 Watch를 소개하고 정적 속성의 변경 사항을 각각 소개합니다.

1. 참조 및 반응성:

Vue 2에서는 Vue.observable() 메서드를 사용하여 일반 객체를 반응형 객체로 변환합니다. Vue 3에는 Ref와 Reactive라는 두 가지 새로운 반응형 API가 도입되었습니다.

• Ref: Ref는 일반 데이터를 래핑하여 반응형으로 만드는 Vue 3의 새로운 유형입니다. 일반 데이터는 ref() 함수를 통해 Ref 객체로 래핑될 수 있습니다. Ref 객체를 사용하는 경우 .value 속성을 통해 값에 액세스하고 수정해야 합니다.

import {
    
     ref } from 'vue';

const count = ref(0);

console.log(count.value); // 访问值

count.value = 1; // 修改值

• Reactive: Reactive는 일반 객체를 수신하고 반응형 프록시 객체를 반환하는 Vue 3의 새로운 함수입니다. Reactive 함수를 사용할 때 Vue 2처럼 객체를 변환하기 위해 Vue.observable()을 수동으로 호출할 필요가 없습니다.

import {
    
     reactive } from 'vue';

const state = reactive({
    
    
  count: 0,
});

console.log(state.count); // 访问值

state.count = 1; // 修改值

2. 계산 및 관찰:

Vue 3에서는 Computed 및 Watch의 사용이 기본적으로 Vue 2와 동일하지만 몇 가지 미묘한 변경 사항이 있습니다.

• 계산: Vue 3에서는 계산() 함수를 사용하여 계산 속성을 생성할 수 있습니다. 계산() 함수는 함수를 매개변수로 받고 Ref 객체를 반환합니다. Vue 3에서는 계산된 속성을 정의하기 위해 더 이상 get 및 set을 사용할 필요가 없으며 계산된 결과를 직접 반환한다는 점에 유의해야 합니다.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2);

console.log(doubledCount.value); // 访问计算属性的值

• Watch: Vue 3에서는 watch() 함수를 사용하여 반응 데이터가 변경될 때 콜백 함수를 실행하는 리스너를 생성할 수 있습니다. watch() 함수는 모니터링할 데이터와 콜백 함수라는 두 가지 매개변수를 받습니다. Vue 3에서는 watch() 함수가 더 이상 문자열 표현식을 지원하지 않습니다.

import {
    
     watch, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
    
    
  console.log(`count changed from ${
      
      oldValue} to ${
      
      newValue}`);
});

3. 정적 속성:

Vue 2에서는 Vue 인스턴스의 $options 속성을 통해 구성 요소의 정적 속성에 액세스할 수 있습니다. Vue 3에서는 정적 속성이 제거되었으며 구성 요소 인스턴스를 통해 직접 액세스할 수 없습니다. 이는 Vue 3가 프록시 기반의 새로운 내부 구현을 사용하고 정적 속성이 더 이상 인스턴스의 일부가 아니기 때문입니다.

요약:
Vue 3에서 Ref 및 Reactive는 반응형 데이터를 생성하는 보다 유연하고 직관적인 방법을 제공합니다. Computed와 Watch는 기본적으로 같은 방식으로 사용됩니다.

하지만 문법적인 세부 사항에는 약간의 변화가 있습니다. Vue 3에서는 구성 요소의 정적 속성이 제거되었으며 인스턴스를 통해 직접 액세스할 수 없다는 점에 유의해야 합니다. 이러한 변경으로 인해 반응형 시스템이 더욱 직관적이고 사용하기 쉬워졌습니다.

4. 가상 DOM

Vue 3에서는 가상 DOM(Virtual DOM)도 Vue 2와 일부 불일치합니다. 다음은 가상 DOM과 관련된 세 가지 변경 사항인 Fragment, Teleport 및 Suspense를 소개합니다.

1. 단편:

Vue 2에서는 템플릿에서 여러 루트 요소를 사용하는 것이 유효하지 않으며 상위 요소에 래핑되어야 합니다. Vue 3에서는 Fragment를 사용하여 이 문제를 해결할 수 있습니다. Fragment는 템플릿의 여러 요소를 래핑하는 데 사용되는 특수 자리 표시자이지만 렌더링 결과에 추가 DOM 요소를 생성하지 않습니다.

조각 사용 예:

<template>
  <Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
  </Fragment>
</template>

조각은 단축 구문을 사용하여 <></>표현할 수 있습니다 .

<template>
  <>
    <div>Element 1</div>
    <div>Element 2</div>
  </>
</template>

2. 텔레포트:

Teleport는 Vue 3의 새로운 기능으로 DOM의 어느 위치에서나 구성 요소의 콘텐츠를 렌더링하는 데 사용됩니다. Teleport는 모달, 대화 상자 또는 팝업 메뉴에서 구성 요소를 렌더링하는 것과 같이 구성 요소 외부의 콘텐츠를 렌더링해야 하는 요구를 처리하는 간결한 방법을 제공합니다.

텔레포트를 사용한 예:

<template>
  <Teleport to="body">
    <div class="modal">
      Modal Content
    </div>
  </Teleport>
</template>

위의 예에서 to속성은 Teleport를 렌더링할 대상 위치(여기)를 지정 body하지만 다른 합법적인 DOM 선택기가 될 수도 있습니다.

3. 서스펜스:

Suspense는 비동기 구성 요소가 로드되어 렌더링될 준비가 될 때까지 비동기 구성 요소를 로드하는 동안 자리 표시자를 표시하는 데 사용되는 Vue 3에 도입된 또 다른 기능입니다. Suspense는 더 나은 사용자 경험과 더 세부적인 제어 기능을 제공합니다.

Suspense를 사용한 예:

<template>
  <Suspense>
    <template #default>
      <div>Loading...</div>
    </template>
    <template #fallback>
      <div>Error! Failed to load component.</div>
    </template>
    <AsyncComponent />
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
  components: {
    AsyncComponent,
  },
};
</script>

위의 예에서 #default슬롯의 콘텐츠는 비동기 구성 요소가 로드되기 전에 표시되고, #fallback슬롯의 콘텐츠는 비동기 구성 요소가 로드되지 않을 때 표시됩니다.

요약:
Vue 3에서 Fragment는 여러 루트 요소의 문제를 해결하는 방법을 제공하고, Teleport는 보다 유연한 구성 요소 렌더링 위치 제어를 제공하며, Suspense는 더 나은 비동기 구성 요소 로딩 경험을 제공합니다. 이것들

이러한 변경 사항은 Virtual DOM의 기능을 강화하여 더 많은 개발 옵션과 더 나은 사용자 경험을 제공합니다.

5. 성능 최적화

Vue 3에는 성능 최적화에 대한 몇 가지 새로운 기능과 개선 사항도 있습니다. 다음에서는 성능 최적화와 관련된 두 가지 측면인 정적 승격과 컴파일 최적화를 소개합니다.

1. 정적 호이스팅:

Vue 2에서는 다시 렌더링할 때마다 템플릿의 정적 콘텐츠가 다시 생성되므로 성능 저하가 발생할 수 있습니다. Vue 3에서는 정적 승격 기술을 통해 컴파일러가 정적 콘텐츠를 감지 및 최적화하고 이를 정적 상수로 승격시켜 재생성 비용을 줄일 수 있습니다.

정적 리프팅은 다음과 같은 이점을 가져올 수 있습니다.

• 가상 DOM 생성 및 비교 횟수를 줄이고 렌더링 성능을 향상시킵니다.
• 불필요한 DOM 작업을 줄임으로써 페이지 리플로우 및 다시 그리기 비용이 줄어듭니다.

2. 컴파일 최적화:

Vue 3에서는 컴파일러를 개선하고 컴파일 효율성과 성능을 향상시키기 위한 몇 가지 최적화 조치를 도입했습니다.

• 패치 플래그: 컴파일러는 업데이트 프로세스 중에 보다 정확한 작업을 수행하고 불필요한 비교 및 ​​렌더링 작업을 줄이기 위해 템플릿의 정적 콘텐츠와 동적 콘텐츠 간의 차이를 기반으로 각 VNode 노드에 패치 플래그를 추가합니다.

• 이벤트 처리 기능 캐싱: Vue 3에서 컴파일러는 이벤트 처리 기능을 캐시하여 다시 렌더링될 때마다 새로운 함수 인스턴스가 생성되는 것을 방지하여 이벤트 처리 성능을 향상시킵니다.

• 정적 노드 승격: 컴파일러는 템플릿에서 정적 노드를 감지하고 이를 상수로 승격시켜 다시 렌더링될 때마다 새 VNode가 생성되지 않도록 하여 렌더링 오버헤드를 줄입니다.

• 트리 쉐이킹: Vue 3의 컴파일러는 템플릿에서 사용되지 않는 구성 요소와 지침을 제거하여 패키징 볼륨을 줄이고 애플리케이션 로딩 성능을 향상시킵니다.

요약:
Vue 3에서는 정적 개선 및 컴파일 최적화와 같은 조치를 통해 애플리케이션 성능을 향상시킬 수 있습니다. 정적 부스팅은 정적 콘텐츠를 다시 만드는 오버헤드를 줄이는 반면, 컴파일 최적화는 컴파일러를 개선하고 렌더링 프로세스를 최적화하여 성능을 향상시킵니다. 이러한 최적화 조치는 Vue 3의 성능을 크게 향상시켜 더 나은 사용자 경험과 더 높은 개발 효율성을 제공합니다.

6. 타입스크립트 지원

Vue 3에서는 TypeScript에 대한 지원이 크게 향상되었습니다. 다음에서는 TypeScript 지원과 관련된 두 가지 측면인 유형 추론과 유형 선언을 소개합니다.

1. 유형 추론:

Vue 3는 많은 경우에 변수 유형을 자동으로 추론할 수 있어 더 나은 유형 안전성과 개발 경험을 제공합니다. 여기 몇 가지 예가 있어요.

• Props 추론: 컴포넌트에서는 defineProps함수를 통해 컴포넌트의 props를 정의하고, props의 기본값과 전달된 값을 기반으로 타입 추론을 수행할 수 있습니다.

import {
    
     defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
    
    
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    // 在使用 props 时，可以获得类型推断
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• refRef 추론: Ref 객체를 생성하기 위해 함수를 사용할 때 Vue 3는 Ref 객체에 래핑된 값의 유형을 자동으로 추론할 수 있습니다.

import {
    
     ref } from 'vue';

const count = ref(0); // 推断为 Ref<number>

console.log(count.value.toFixed(2)); // value 推断为 number

• 계산된 추론: computed함수를 사용하여 계산된 속성을 생성할 때 Vue 3는 계산된 함수의 반환 값을 기반으로 계산된 속성의 유형을 자동으로 추론할 수 있습니다.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2); // 推断为 ComputedRef<number>

console.log(doubledCount.value.toFixed(2)); // value 推断为 number

2. 유형 선언:

Vue 3은 TypeScript에서 Vue 구성 요소를 사용할 때 보다 정확한 유형 추론 및 유형 검사를 위한 더 나은 지원을 제공합니다.

• defineComponentDefineComponent 함수: 구성 요소 구성 개체를 받아들이고 올바른 유형 선언이 포함된 구성 요소 옵션 개체를 반환하는 함수를 사용하여 구성 요소를 정의할 수 있습니다 .

import {
    
     defineComponent } from 'vue';

export default defineComponent({
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• 옵션 API 유형 선언: 옵션 API를 사용하는 구성 요소의 경우 Vue 3는 구성 요소 옵션을 작성할 때 올바른 유형 힌트와 유형 확인을 얻을 수 있도록 올바른 유형 선언을 제공합니다.

import {
    
     Options, VueConstructor } from 'vue';

const MyComponent: Options = {
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
};

export default MyComponent as VueConstructor;

요약:
Vue 3에서 TypeScript 지원이 향상되었습니다.

, 유형 추론 및 유형 선언 포함. 유형 추론을 통해 개발자는 더 나은 유형 안전성과 개발 경험을 얻을 수 있으며, 유형 선언은 Vue 구성 요소를 사용할 때 정확한 유형 힌트와 유형 검사를 보장합니다. 이러한 개선 사항을 통해 TypeScript를 사용하여 Vue 애플리케이션을 더욱 편안하고 효율적으로 개발할 수 있습니다.

7. 슬롯 및 구성 요소

Vue 3에서는 슬롯과 구성 요소에도 몇 가지 변경 사항이 있습니다. 새로운 슬롯 구문과 구성 요소 인스턴스 액세스는 아래에 소개됩니다.

1. 새로운 슬롯 구문:

Vue 3에는 더욱 유연하고 직관적인 새로운 슬롯 구문이 도입되었습니다. 새로운 슬롯 구문은 <slot>요소를 사용하여 슬롯을 정의하고 명명된 슬롯과 범위가 지정된 슬롯을 통해 더 많은 기능을 활성화합니다.

명명된 슬롯의 예:

<template>
  <div>
    <slot name="header"></slot>
    <div>Content</div>
    <slot name="footer"></slot>
  </div>
</template>

<template v-slot:slotName>컴포넌트를 사용할 때 또는 약어를 사용하여 <template #slotName>슬롯 내용을 구체적으로 정의 할 수 있습니다 .

<template>
  <MyComponent>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
    <template #footer>
      <footer>Footer Content</footer>
    </template>
  </MyComponent>
</template>

범위 슬롯 예:

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <div>Content</div>
    <slot name="footer" :year="year"></slot>
  </div>
</template>

slotProps범위가 지정된 슬롯을 사용할 때 슬롯에 전달된 데이터는 슬롯 콘텐츠 내의 속성을 통해 액세스할 수 있습니다 .

<template>
  <MyComponent>
    <template #header="slotProps">
      <h1>{
   
   { slotProps.title }}</h1>
    </template>
    <p>Main Content</p>
    <template #footer="slotProps">
      <footer>{
   
   { slotProps.year }}</footer>
    </template>
  </MyComponent>
</template>

2. 구성 요소 인스턴스 액세스:

Vue 2에서는 를 $refs통해 컴포넌트 인스턴스에 접근할 수 있었지만, Vue 3에서는 컴포넌트 인스턴스에 접근하는 방식이 변경되었습니다. ref함수를 사용하여 반응적 참조를 생성하고 이를 구성 요소에 바인딩 할 수 있습니다 .

<template>
  <div>
    <MyComponent ref="myComponentRef"></MyComponent>
    <button @click="logComponentData">Log Component Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myComponentRef = ref(null);

    const logComponentData = () => {
      console.log(myComponentRef.value.data);
    };

    return {
      myComponentRef,
      logComponentData,
    };
  },
};
</script>

위의 예에서 ref참조는 함수를 통해 생성되고 구성 요소 myComponentRef에 바인딩 됩니다. 그런 다음 를 통해 구성 요소 인스턴스에 액세스하고 해당 데이터를 가져올 MyComponent수 있습니다.myComponentRef.value

요약:
Vue 3에서는 슬롯 구문이 변경되었습니다.

새로운 슬롯 구문을 도입하여 슬롯을 더욱 유연하고 직관적으로 사용할 수 있게 되었습니다. 동시에 구성 요소 인스턴스에 대한 액세스도 변경되었습니다. ref리액티브 참조는 함수를 통해 생성되고 구성 요소에 바인딩되어 구성 요소 인스턴스에 액세스할 수 있습니다. 이러한 변경으로 인해 슬롯과 구성 요소를 더욱 편리하고 강력하게 사용할 수 있게 되었습니다.

8. 전환 및 애니메이션

Vue 3에서는 전환 및 애니메이션이 일부 개선되었습니다. Transition 컴포넌트와 애니메이션 클래스 이름의 두 가지 측면이 아래에 소개됩니다.

1. 전환 구성요소:

Vue 3에서는 Transition 컴포넌트를 통해 전환 효과를 얻을 수 있습니다. Transition 구성 요소는 요소를 삽입하거나 제거할 때 전환 효과를 적용하는 기능을 제공합니다.

Transition 구성요소를 사용할 때 다음 속성을 통해 전환 효과를 제어할 수 있습니다.

• name: 전환 효과의 이름을 지정하고, CSS 클래스 이름을 설정하여 구체적인 전환 효과를 정의할 수 있습니다.

• appear: 초기 렌더링 시 전환 효과를 적용할지 여부를 지정합니다.

• enter-class// enter-active-class: enter-to-class요소 삽입 시 전환 클래스 이름을 지정합니다.

• leave-class// leave-active-class: leave-to-class요소 제거 시 전환 클래스 이름을 지정합니다.

다음은 Transition 구성요소를 사용하여 그래디언트 전환을 구현하는 예입니다.

<template>
  <Transition name="fade">
    <div v-if="show" class="box"></div>
  </Transition>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    return {
      show,
      toggle,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

위의 예에서는 name="fade"설정을 통해 랩핑된 요소에 Transition 컴포넌트가 적용되고 전환 효과의 CSS 클래스 이름이 정의됩니다. 초기 렌더링 중에는 그라데이션 모양 효과를 얻기 위해 fade-enter및 fade-enter-active클래스 이름이 적용됩니다. 요소가 제거되면 클래스 이름이 적용되어 그라데이션이 사라지는 효과를 얻을 수 있습니다 fade-leave.fade-leave-active

2. 애니메이션 클래스 이름:

Vue 3에서는 애니메이션 클래스 이름을 사용하여 요소에 애니메이션을 적용할 수 있습니다. Vue 2와 마찬가지로 요소에 클래스 이름을 추가하여 애니메이션 효과를 실행할 수 있습니다.

Vue 3에서 일반적으로 사용되는 애니메이션 클래스 이름은 다음과 같습니다.

• enter: 삽입된 요소의 시작 상태입니다.

• enter-active: 삽입된 요소의 전환 상태입니다.

• enter-to: 삽입된 요소의 끝 상태입니다.

• leave: 요소의 시작 상태를 제거합니다.

• leave-active: 요소의 전환 상태를 제거합니다.

• leave-to: 요소의 최종 상태를 제거합니다.

이러한 클래스 이름의 CSS 스타일을 정의하여 특정 애니메이션 효과를 얻을 수 있습니다.

예를 들어 간단한 페이드 애니메이션을 구현해 보겠습니다.

<template>
  <div :class="animationClass" class="box"></div>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {


    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    const animationClass = ref('');

    watch(show, () => {
      animationClass.value = show.value ? 'fade-enter-active' : 'fade-leave-active';
    });

    return {
      show,
      toggle,
      animationClass,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

위의 예에서 animationClass애니메이션 효과는 동적 바인딩을 통해 달성됩니다. 값이 변경 되면 show값이 show값에 따라 설정 되어 animationClass해당 애니메이션 효과가 트리거됩니다.

요약:
Vue 3에서는 Transition 구성 요소와 애니메이션 클래스 이름을 통해 전환 및 애니메이션 측면을 구현할 수 있습니다. Transition 컴포넌트는 요소에 대한 전환 효과의 삽입 및 제거를 제어하는 ​​기능을 제공하며, 애니메이션 클래스 이름에 클래스 이름을 추가하여 애니메이션 효과를 트리거할 수 있습니다. 이러한 개선으로 전환과 애니메이션이 더욱 유연해지고 사용하기 쉬워졌습니다.

9. 글로벌 API 변경

Vue 3에서는 이름 변경 및 전역 API 제거를 포함하여 전역 API가 일부 변경되었습니다. 이 두 가지 측면의 변경 사항은 아래에서 소개됩니다.

1. 글로벌 API 이름 변경:

Vue 3에서는 기능과 목적을 더 잘 반영하기 위해 일부 전역 API의 이름이 변경되었습니다.

• Vue: Vue 3에서는 Vue생성자가 더 이상 기본 진입점으로 내보내지지 않습니다. createApp함수를 사용하여 애플리케이션 인스턴스를 생성 할 수 있습니다 .

// Vue 2
new Vue({
    
    
  // ...
});

// Vue 3
import {
    
     createApp } from 'vue';

createApp({
    
    
  // ...
}).mount('#app');

• filter: Vue 2에서는 Vue.filter전역 메소드를 통해 필터를 등록할 수 있었지만 Vue 3에서는 필터가 제거되었습니다. 로컬 필터나 사용자 정의 기능을 사용하여 동일한 기능을 얻을 수 있습니다.

• directive: Vue 2에서는 Vue.directive전역 메소드를 통해 지시문을 등록할 수 있었지만 Vue 3에서는 지시문이 제거되었습니다. 사용자 지정 지시문을 사용하거나 구성 요소에서 직접 지시문을 사용하여 전역 지시문을 바꿀 수 있습니다.

• mixin: Vue 2에서는 Vue.mixinmixin 옵션을 전역 메서드를 통해 전달할 수 있었지만 Vue 3에서는 mixin 옵션이 제거되었습니다. Composition API를 사용하여 동일한 기능을 구현할 수 있습니다.

• component: Vue 2에서는 Vue.component전역 메소드를 통해 전역 컴포넌트를 등록할 수 있었지만, Vue 3에서는 컴포넌트 등록 방식이 변경되었습니다. 구성 요소는 로컬 등록을 사용하거나 애플리케이션 인스턴스 메서드를 통해 등록할 수 있습니다 component.

2. 글로벌 API 제거:

이름 변경 외에도 Vue 3에서는 일부 전역 API를 제거합니다. 해당 기능이 다른 수단을 통해 구현될 수 있거나 더 이상 사용이 권장되지 않기 때문입니다.

• v-once: Vue 2에서는 v-once지시어를 사용하여 한 번만 렌더링할 요소와 구성 요소를 표시할 수 있습니다. Vue 3에서는 v-once지시문이 제거되었으며 반응형 데이터 및 조건부 렌더링을 통해 동일한 효과를 얻을 수 있습니다.

• inline-template: Vue 2에서는 inline-template속성을 사용하여 구성 요소의 태그 안에 구성 요소의 템플릿을 작성할 수 있습니다. Vue 3에서는 inline-template이 기능이 제거되었으며 단일 파일 구성 요소 또는 문자열 템플릿을 통해 동일한 기능을 얻을 수 있습니다.

• sync수정자: Vue 2에서는 sync수정자를 사용하여 상위 구성 요소와 하위 구성 요소 간의 양방향 바인딩을 구현할 수 있습니다. Vue 3에서는 sync수정자가 제거되었으며 v-model이벤트에 대한 명시적 바인딩을 사용하여 양방향 바인딩을 달성할 수 있습니다.

요약:
Vue 3에서는 전역 API가 이름 변경 및 이동을 포함하여 일부 변경되었습니다.

글로벌 API를 제외하고. 이러한 변경 사항은 API의 일관성과 사용 편의성을 개선하고 개발자가 동일한 기능을 달성하기 위해 더 나은 대안을 사용하도록 하기 위한 것입니다. 개발자는 이러한 변경 사항을 인지하고 그에 따라 코드를 업데이트해야 합니다.

10. 도구 및 생태계 구축

빌드 도구 및 생태계 측면에서 Vue 3에는 Vue CLI 및 타사 라이브러리의 적용을 포함하여 몇 가지 개선 사항이 도입되었습니다. 이 두 가지 측면의 변경 사항은 아래에서 소개됩니다.

1. Vue CLI 요 Vue CLI 2:

Vue CLI는 Vue 프로젝트를 빠르게 구축하고 관리하는 데 사용되는 Vue.js의 공식 스캐폴딩 도구입니다. Vue CLI 2는 Vue 2 시대의 버전인 반면, Vue CLI는 Vue 3의 새로운 버전입니다.

Vue CLI 3은 Vue CLI 2에 비해 다음과 같은 개선 사항이 있습니다.

• 최신 플러그인 메커니즘을 사용하여 확장 및 사용자 정의를 더욱 유연하고 쉽게 만듭니다.

• 프로젝트 구성 및 관리를 용이하게 하기 위해 Vue CLI UI를 통해 그래픽 인터페이스가 제공됩니다.

• 일반적으로 사용되는 빌드 및 개발 도구를 통합하는 확장 가능한 기본 빌드 도구인 Vue CLI 서비스가 도입되었습니다.

• Composition API 및 새로운 라이프사이클과 같은 Vue 3의 새로운 기능을 지원합니다.

따라서 Vue 3 프로젝트의 경우 프로젝트 초기화 및 관리를 위해 Vue CLI를 사용하는 것이 좋습니다.

2. 타사 라이브러리의 적용:

Vue 3이 출시되면서 많은 타사 라이브러리도 Vue 3의 새로운 기능과 구문을 지원하기 위해 조정 및 업그레이드되고 있습니다. 일반적으로 사용되는 일부 Vue 생태계 라이브러리는 Vue 3의 호환 버전을 출시했거나 공식 문서에 Vue 3 적응 가이드를 제공했습니다.

타사 라이브러리를 사용하는 경우 공식 문서를 참조하여 Vue 3 지원 여부와 적응 방법을 알아보는 것이 좋습니다. 일반적으로 Vue 3에 맞게 조정된 타사 라이브러리는 특정 설치 및 사용 지침을 제공하며 주목해야 할 일부 구문 및 API 변경 사항이 있을 수 있습니다.

또한 Vue 3에는 @vue/composition-apiVue 2 프로젝트에서 Composition API를 사용하는 데 사용할 수 있는 공식 플러그인도 도입되었습니다. 이 플러그인을 사용하면 Vue 2 프로젝트에서 Vue 3의 Composition API로 점진적으로 마이그레이션하는 것이 더 쉬워집니다.

요약:
도구 및 생태계 구축 측면에서 Vue 3는 Vue CLI에 대한 업데이트와 타사 라이브러리의 적용을 제공합니다. Vue 3 프로젝트를 생성 및 관리하려면 Vue CLI 3을 사용하고, Vue 3에 대한 지원 및 적응에 대해 알아보려면 타사 라이브러리의 공식 문서를 확인하는 것이 좋습니다. 이러한 개선 사항을 통해 개발자는 Vue 3의 새로운 기능과 생태계를 더 잘 활용하여 개발 효율성과 코드 품질을 향상시킬 수 있습니다.