Vue 2 → Vue 3 주요 변경사항

// Vue 2
new Vue({ el: '#app', render: h => h(App) })

// Vue 3
import { createApp } from 'vue'
createApp(App).mount('#app')

<!-- Vue 2: 반드시 단일 루트 -->
<template>
  <div> <!-- 필수 wrapper -->
    <h1>제목</h1>
    <p>내용</p>
  </div>
</template>

<!-- Vue 3: 다중 루트 OK -->
<template>
  <h1>제목</h1>
  <p>내용</p>
</template>

<!-- Vue 2 -->
<!-- 기본: value prop + input event -->
<MyInput v-model="text" />
<!-- .sync 수식어로 다중 바인딩 -->
<MyInput :title.sync="title" />

<!-- Vue 3 -->
<!-- 기본: modelValue prop + update:modelValue event -->
<MyInput v-model="text" />
<!-- 다중 v-model 지원, .sync 제거 -->
<MyInput v-model:title="title" v-model:content="content" />

<!-- Vue 2: v-for가 우선순위 높음 -->
<!-- Vue 3: v-if가 우선순위 높음 (같이 쓰는 건 여전히 비권장) -->

<!-- Vue 2: key를 자식에 -->
<template v-for="item in list">
  <div :key="item.id">...</div>
</template>

<!-- Vue 3: key를 template에 -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
</template>

// Vue 2 내부 동작 (개념적 표현)
function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get() { return value },   // 의존성 수집
    set(newValue) { value = newValue }  // 변경 감지 → 리렌더링 트리거
  })
}

// ① 동적 속성 추가 → 감지 안 됨
this.user.age = 20              // ❌ 화면 갱신 안 됨
this.$set(this.user, 'age', 20) // ✅ 우회 방법

// ② 속성 삭제 → 감지 안 됨
delete this.user.name           // ❌
this.$delete(this.user, 'name') // ✅ 우회 방법

// ③ 배열 인덱스 직접 수정 → 감지 안 됨
this.items[0] = newItem           // ❌
this.$set(this.items, 0, newItem) // ✅ 우회 방법
this.items.length = 0             // ❌
this.items.splice(0)              // ✅ 우회 방법

// ④ 초기 data가 깊은 중첩 구조라면 앱 시작 시 전부 재귀 순회 → 초기 로딩 비용

// Vue 3 내부 동작 (개념적 표현)
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)       // 의존성 수집
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)     // 변경 트리거
      return true
    },
    deleteProperty(target, key) {
      delete target[key]
      trigger(target, key)     // 삭제도 감지!
      return true
    }
  })
}

// ① $set / $delete 완전히 사라짐 → 그냥 JS처럼 쓰면 됨
this.user.age = 20    // ✅
delete this.user.name // ✅

// ② 배열을 자유롭게 조작
this.items[0] = newItem   // ✅
this.items.length = 0     // ✅

// ③ Map, Set도 반응성 지원
const state = reactive({ userMap: new Map(), tagSet: new Set() })
state.userMap.set('id_1', { name: '철수' })  // ✅ 감지됨
state.tagSet.add('vue3')                      // ✅ 감지됨

// ④ Lazy하게 동작 → 초기화 성능 향상
// 실제로 접근한 중첩 속성만 그때그때 Proxy로 감쌈
const state = reactive({ a: { b: { c: { d: '깊은 값' } } } })
// state.a.b에 접근하는 순간 b도 Proxy로 감쌈

// ⑤ 존재하지 않는 속성 접근도 감지
const state = reactive({})
watchEffect(() => { console.log(state.someKey) })
state.someKey = 'hello'  // ✅ watchEffect 재실행됨

// Vue 2.7에서 이렇게 써도
const state = reactive({ count: 0 })
const num = ref(0)

// 내부적으로는 결국 이걸 거침
Object.defineProperty(state, 'count', { get, set })

const state = reactive({})
state.newKey = 'value'      // ❌ 감지 안 됨 → 새 객체로 교체해야 함
state.list[0] = 'item'      // ❌ → splice 또는 새 배열 할당

// 안전한 우회 방법
state.user = { ...state.user, age: 20 }  // ✅ 새 객체로 교체

// Vue 2 Options API: 같은 기능의 코드가 data/methods/watch에 분산
export default {
  data() { return { mouseX: 0, mouseY: 0, userList: [], loading: false } },
  methods: { onMouseMove() {...}, fetchUsers() {...} },
  mounted() {
    window.addEventListener('mousemove', this.onMouseMove)
    this.fetchUsers()
  },
  beforeDestroy() { window.removeEventListener('mousemove', this.onMouseMove) }
}

// Vue 2.7 Composition API: 기능별로 묶어서 분리
function useMouse() {
  const x = ref(0), y = ref(0)
  const onMove = (e) => { x.value = e.clientX; y.value = e.clientY }
  onMounted(() => window.addEventListener('mousemove', onMove))
  onBeforeUnmount(() => window.removeEventListener('mousemove', onMove))
  return { x, y }
}

function useUserList() {
  const list = ref([])
  const loading = ref(false)
  const fetch = async () => {
    loading.value = true
    list.value = await api.getUsers()
    loading.value = false
  }
  onMounted(fetch)
  return { list, loading }
}

export default {
  setup() {
    return { ...useMouse(), ...useUserList() }
  }
}

❌ createApp()                   — Vue 2는 앱 인스턴스 격리 구조 없음
❌ <script setup> 내 top-level await — Vue 2는 비동기 컴포넌트 초기화 미지원
❌ 템플릿 표현식 내 TypeScript 문법  — Vue 2 파서와 호환 불가
❌ Reactivity Transform           — 당시 실험적 기능으로 미포팅
❌ expose 옵션 (Options 컴포넌트)   — <script setup>의 defineExpose()는 지원

✅ Composition API   (reactive, ref, computed, watch 등)
✅ <script setup>
✅ CSS v-bind()      — style 블록에서 반응성 변수 바인딩 가능
✅ defineComponent() — Vue.extend 대비 향상된 타입 추론
✅ emits 옵션        — 런타임 동작은 없고 타입 체크 용도로만 지원

// Vue 3
const instance = getCurrentInstance()
instance.proxy
instance.emit(...)

// Vue 2.7: Vue 2 내부 구조 기반이라 반환 객체 구조가 다름
// composable 내부에서 getCurrentInstance()를 직접 쓰는 코드는
// 마이그레이션 시 수정 필요

// Vue 2: EventBus 패턴
const bus = new Vue()
bus.$on('event', handler)
bus.$emit('event', data)

// Vue 3: 완전 제거됨
// → mitt 같은 외부 라이브러리 사용하거나 Pinia/Vuex로 대체
import mitt from 'mitt'
const emitter = mitt()

// Vue 2
this.$listeners  // 부모가 전달한 이벤트 핸들러들

// Vue 3: $attrs에 통합됨
this.$attrs  // class, style 포함한 모든 fallthrough attributes + listeners

<!-- Vue 2 -->
{{ price | currency }}

<!-- Vue 3: 필터 완전 제거 -->
<!-- computed나 메서드로 대체 -->
{{ formatCurrency(price) }}

// Vue 3
export default {
  emits: ['submit', 'cancel'],  // 명시적 선언
  methods: {
    handleClick() {
      this.$emit('submit', data)
    }
  }
}

<!-- Vue 3 신규 빌트인 -->
<Teleport to="body">
  <Modal />
</Teleport>

<Suspense>
  <template #default><AsyncComponent /></template>
  <template #fallback><Loading /></template>
</Suspense>

// Vue 2
const router = new VueRouter({ routes })

// Vue 3
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes
})