버전별 instance 생성 방식

1. Vue.createApp() (Vue 3.x)

**Vue.createApp()**는 Vue 3.x 버전에서 애플리케이션 인스턴스를 생성하는 새로운 방식입니다. Vue 3는 여러 가지 변경 사항이 포함되어 있는데, 그 중 하나가 Vue 인스턴스를 생성하는 방법의 변화입니다.

특징:

• 애플리케이션 수준의 인스턴스 생성: Vue.createApp()은 애플리케이션을 초기화하고, 루트 컴포넌트를 마운트하는 데 사용됩니다.
• 컴포넌트 기반: Vue 3에서 애플리케이션은 컴포넌트 기반으로 관리되며, Vue.createApp()은 루트 컴포넌트를 설정한 뒤, 해당 컴포넌트를 DOM에 마운트합니다.
• **app.mount("#app")**를 통해 실제 DOM에 마운트됩니다.
• 타입스크립트 지원 향상: Vue 3는 타입스크립트 지원이 강력해졌기 때문에, Vue.createApp()을 사용하면 타입 안정성을 보다 쉽게 유지할 수 있습니다.
• new Vue()와 다르게 글로벌 API 접근이 제한적: Vue 3에서는 글로벌 API(예: Vue.use()) 대신 app.use() 등의 방식으로 기능을 추가합니다.

예시:

<script src="https://unpkg.com/vue"></script>
<script>

const app = Vue.createApp({
  data() {
    return {
      message: "Hello, Vue 3!"
    };
  }
});
app.mount("#app");

</script>

2. new Vue() (Vue 2.x)

**new Vue()**는 Vue 2.x 버전에서 사용되던 방식으로, Vue 애플리케이션 인스턴스를 생성하는 구식 방식입니다. Vue 2.x에서는 new Vue()를 사용하여 애플리케이션을 초기화하고, 컴포넌트와 데이터를 설정한 뒤, DOM에 마운트할 수 있었습니다.

특징:

• Vue 2.x의 기본 방식: Vue 2.x에서 애플리케이션을 설정할 때는 new Vue()를 사용하여 애플리케이션 인스턴스를 생성하고, el 속성을 통해 DOM 요소에 마운트합니다.
• 컴포넌트와 data, methods, computed 등을 설정하고, **el**을 사용하여 루트 DOM 요소를 지정합니다.
• 전체 애플리케이션을 하나의 인스턴스로 관리하는 구조입니다.
• 글로벌 API 사용 가능: new Vue()로 생성한 인스턴스에서는 글로벌 API(예: Vue.use())를 사용할 수 있었습니다.

예시:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<script>

new Vue({
  el: "#app", // 마운트할 DOM 요소
  data() {
    return {
      message: "Hello, Vue 2!"
    };
  }
});

</script>

 

3. 주요 차이점

특징Vue.createApp() (Vue 3.x)new Vue() (Vue 2.x)

버전	Vue 3.x	Vue 2.x
애플리케이션 인스턴스 생성 방식	Vue.createApp()을 사용	new Vue()을 사용
마운트 방식	.mount() 메서드로 마운트	el 속성으로 마운트
타입스크립트 지원	뛰어난 타입스크립트 지원	제한적
컴포넌트 시스템	컴포넌트 기반, 모든 것이 컴포넌트로 처리	Vue 인스턴스를 기반으로 작동
글로벌 API 사용	app.use() 등을 통해 기능 확장	Vue.use() 등 글로벌 API 사용
반응성 시스템	Proxy 기반의 반응성 시스템(보다 효율적)	Object.defineProperty 기반

4. Vue 3.x의 Vue.createApp() 사용 이유

Vue 3에서는 new Vue() 방식에서 Vue.createApp() 방식으로 변경된 주요 이유는 다음과 같습니다:

• 컴포넌트 중심의 설계: Vue 3에서는 애플리케이션이 컴포넌트로 구성되며, createApp을 사용해 애플리케이션을 컴포넌트 단위로 구성하는 방식으로 변경되었습니다.
• 반응성 시스템 개선: Vue 3는 Proxy 기반의 새로운 반응성 시스템을 도입하여 성능이 향상되었으며, createApp 방식은 이를 더 효율적으로 활용할 수 있게 합니다.
• 유연성 및 확장성: Vue.createApp()은 애플리케이션을 더 유연하고 모듈화된 방식으로 구성할 수 있게 합니다. 또한, 타입스크립트와의 호환성이 개선되어, 대규모 애플리케이션 개발 시 더 나은 경험을 제공합니다.
• 기존 Vue 2와의 호환성 분리: Vue 3은 Vue 2와의 차별화된 API를 제공하기 위해 createApp을 도입했으며, Vue 2와의 호환성 문제를 줄이기 위한 방법이기도 합니다.

결론

• **new Vue()**는 Vue 2.x에서 애플리케이션을 생성하는 전통적인 방식입니다.
• **Vue.createApp()**는 Vue 3.x에서 애플리케이션 인스턴스를 생성하는 새로운 방식으로, 더 나은 성능과 유연성, 확장성을 제공합니다.

Vue 3에서는 new Vue() 대신 Vue.createApp() 방식을 사용하며, Vue 2에서 사용하던 방식은 더 이상 Vue 3에서 사용되지 않습니다.