Vue 2에서 3 마이그레이션

// Vue 2 — 전역 API
Vue.component('MyComponent', {})
Vue.directive('focus', {})
Vue.use(router)
Vue.mixin(globalMixin)

// Vue 3 — 앱 인스턴스 API
const app = createApp(App)
app.component('MyComponent', {})
app.directive('focus', {})
app.use(router)
// 전역 mixin은 권장하지 않음

<!-- Vue 2 -->
<!-- 기본: value prop + input event -->
<!-- .sync 수식어: :title.sync="pageTitle" -->

<!-- Vue 3 -->
<!-- 기본: modelValue prop + update:modelValue event -->
<!-- .sync 제거 → v-model:title="pageTitle" -->

<!-- Vue 2 -->
<ChildComponent v-model="value" :title.sync="pageTitle" />

<!-- Vue 3 -->
<ChildComponent v-model="value" v-model:title="pageTitle" />

<!-- Vue 2: v-for가 v-if보다 우선 -->
<!-- Vue 3: v-if가 v-for보다 우선 (반대!) -->

<!-- Vue 3에서는 같은 엘리먼트에 함께 사용 금지 -->
<!-- template으로 분리해야 함 -->
<template v-for="item in items" :key="item.id">
  <div v-if="item.active">{{ item.name }}</div>
</template>

// Vue 2 — 이벤트 버스 패턴
const eventBus = new Vue()
eventBus.$on('event', handler)
eventBus.$emit('event', data)

// Vue 3 — 제거됨
// 대안 1: mitt 라이브러리
import mitt from 'mitt'
const emitter = mitt()
emitter.on('event', handler)
emitter.emit('event', data)

// 대안 2: Provide/Inject 또는 Pinia

- $listeners 제거 → $attrs에 통합
- 필터(filter) 제거 → computed 또는 메서드 사용
- $children 제거 → template refs 사용
- $set / $delete 제거 → Proxy가 자동 감지
- 다중 루트 엘리먼트 허용 (Fragment)
- emits 옵션 추가 (이벤트 명시적 선언)
- Teleport, Suspense 추가

npm install vue@^3 @vue/compat

// vue.config.js 또는 vite.config.ts
module.exports = {
  resolve: {
    alias: {
      vue: '@vue/compat'  // vue를 호환 빌드로 교체
    }
  }
}

1단계: 준비
  - Vue 2 최신 버전(2.7)으로 업데이트
  - vue-demi 호환 라이브러리 확인
  - 사용 중인 패키지의 Vue 3 지원 여부 확인

2단계: @vue/compat 도입
  - vue를 @vue/compat으로 교체
  - 앱 실행하여 경고 메시지 확인
  - 가장 많이 나오는 경고부터 수정

3단계: 점진적 전환
  - Options API → Composition API (선택적)
  - Vuex → Pinia
  - 이벤트 버스 → Provide/Inject 또는 mitt
  - 필터 → computed/메서드

4단계: 완료
  - @vue/compat 제거, vue 3 직접 사용
  - Vue 3 전용 기능 도입 (script setup, defineModel 등)