🎯 Vue 2와 Vue 3 차이점 총정리 – 무엇이 달라졌을까?

Vue.js는 많은 프론트엔드 개발자들이 사랑하는 프레임워크입니다.
2020년에 Vue 3가 정식 출시되면서 Vue 2와는 많은 변화가 생겼는데요,
이번 글에서는 Vue 2와 Vue 3의 핵심적인 차이점들을 정리해보려고 합니다.

---

1️⃣ Composition API vs Options API

Vue 2는 Options API를 기반으로 구성됩니다.
data, methods, computed, watch 같은 옵션들을 분리해서 정의하죠.

Vue 3에서는 기존 방식도 그대로 사용할 수 있지만,
새로운 Composition API가 추가되었습니다.
setup() 함수 안에서 관련 로직을 하나로 묶어 관리할 수 있어 코드 재사용성과 응집력이 좋아졌습니다.

// Vue 2 방식
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

// Vue 3 Composition API 방식
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

---

2️⃣ 반응성 시스템 개선

Vue 2는 Object.defineProperty()를 사용해 데이터의 반응성을 구현했습니다.
하지만 깊은 객체나 배열에 대한 감지가 한계가 있었죠.

Vue 3에서는 Proxy 기반의 반응성 시스템을 도입해
성능과 유연성이 크게 향상되었습니다.
이 덕분에 복잡한 구조의 상태 관리도 훨씬 안정적으로 할 수 있게 되었죠.

---

3️⃣ 성능 향상

Vue 3는 Virtual DOM을 완전히 재작성하면서 다음과 같은 성능 향상을 이뤘습니다:

• 초기 렌더링 속도 향상
• 메모리 사용량 감소
• 더 나은 TypeScript 지원
• Tree-shaking을 통한 번들 사이즈 최적화

---

4️⃣ 새로운 기능들: Fragment, Teleport, Suspense

Vue 3에서는 기존에 없던 유용한 기능들이 도입되었습니다:

• Fragment: 컴포넌트에서 여러 개의 루트 노드를 반환할 수 있음
• Teleport: 특정 DOM 노드로 컴포넌트 텔레포트 가능 (예: 모달, 툴팁)
• Suspense: 비동기 컴포넌트 로딩을 더 세련되게 처리

---

5️⃣ TypeScript 지원 강화

Vue 3는 처음부터 TypeScript로 작성되었습니다.
덕분에 컴포넌트 작성 시 자동 완성과 타입 추론이 훨씬 강력해졌습니다.
기존 Vue 2에서도 TypeScript를 쓸 수는 있었지만, Vue 3에 비해 제한적이었습니다.

---

6️⃣ 라이프사이클 훅 변경

Composition API에서는 기존 라이프사이클 훅들이 다음과 같이 변경됩니다:

Vue 2	Vue 3 (Composition API)
created	onBeforeMount()
mounted	onMounted()
updated	onUpdated()
destroyed	onUnmounted()

Composition API 훅은 setup() 함수 안에서 호출되어야 합니다.

---

7️⃣ Vue 2 → Vue 3 마이그레이션 주의사항

Vue 3는 기존 Vue 2와 완전히 호환되지는 않습니다.
다음과 같은 점들을 고려해야 합니다:

• Vue Router 4, Vuex 4 등 Vue 3 전용 버전 사용 필요
• 일부 타사 라이브러리는 아직 Vue 3를 완전히 지원하지 않을 수 있음
• 마이그레이션을 위한 공식 도구: Vue Migration Guide

---

✨ 마무리

Vue 3는 단순히 "업그레이드" 수준을 넘어선 새로운 패러다임의 시작입니다.
Composition API의 도입은 Vue를 더 유연하고 확장 가능하게 만들었으며,
성능 향상과 새로운 기능들도 매우 인상적입니다.

Vue 2에 익숙하신 분이라면,
Vue 3의 새로운 문법과 기능들을 하나씩 천천히 익혀보는 걸 추천드립니다.
공식 문서나 예제를 참고하면서 점진적으로 전환해보세요!