Vue3 마이그레이션

Vue3는 Vue2와 비교해 성능과 개발 경험을 크게 개선한 버전이다. 마이그레이션 시 제거된 기능들을 파악하고 대체 패턴을 익히는 것이 핵심이다. Vue2에서 Vue3로의 전환 과정에서 키코드 수식어, 필터 API, 이벤트 버스 패턴이 완전히 제거되었다.

키코드 수식어 제거: Vue2에서는 `@keyup.13="onSubmit"`처럼 키보드 이벤트에 숫자 키코드를 직접 쓸 수 있었다. Vue3부터는 이 방식이 불가능해지고 `@keyup.enter="onSubmit"`, `@keyup.arrow-up="rollUp"`처럼 MDN 키 이름을 케밥 케이스로 변환한 별칭만 사용할 수 있다.

필터(Filter) API 제거: Vue2에서 텍스트 콘텐츠 포맷 변환에 쓰이던 필터(`{{ value | format }}`) 기능이 Vue3에서 삭제되었다. 대신 computed 속성 또는 methods로 동일한 변환 로직을 구현하도록 권장한다.

이벤트 버스($on/$off/$once) 제거: Vue2에서는 빈 Vue 인스턴스를 이벤트 버스로 생성해 부모-자식 관계가 아닌 컴포넌트 간 통신에 `$on`으로 이벤트를 구독하는 패턴이 있었다. Vue3에서는 `$on`, `$off`, `$once`를 포함하는 이벤트 API가 완전히 제거되었다(`$emit`은 유지). 관련 기능이 필요한 경우 mitt 같은 서드파티 이벤트 에미터 라이브러리를 사용해야 한다.

Vue3 마이그레이션은 어렵지 않은 편이며, 기존 Vue2 대비 개발 퍼포먼스와 불편한 부분들이 개선되어 신규·진행 중인 프로젝트에 적극 도입할 만하다.

핵심 내용

• 키코드 수식어 제거: 숫자 코드(`@keyup.13`) → MDN 키 이름 케밥 케이스(`@keyup.enter`)로 교체
• 필터 API 제거: `{{ value | filter }}` → computed 속성 또는 methods로 대체
• 이벤트 버스 패턴 삭제: `$on`/`$off`/`$once` 제거, 이벤트 버스가 필요하면 서드파티 라이브러리 활용
• `$emit`은 Vue3에서도 유지
• 이벤트 버스 패턴은 성능상 단점이 있어 전역 스토어나 props/emit 패턴이 더 권장됨

관련 개념

• React 컴포넌트 패턴 — 컴포넌트 간 통신 설계 관점 비교
• React 상태 관리 — 이벤트 버스 대체로 쓰이는 전역 상태 관리 방식
• 웹 컴포넌트 — 프레임워크 독립적 컴포넌트 표준
• FED 프론트엔드 UX 워크플로우 — 프론트엔드 개발 실무 흐름

출처

• Vue3 #6 [제거된 기능들] — 2022-06-23, hongdoyoung