Vue2 vs Vue3 차이점

Vue2와 Vue3의 간단한 차이점 비교.

 

* 공식문서

https://ko.vuejs.org/guide/introduction.html

 

 

1. 성능 개선:

• Vue.js 3는 가상 돔(Virtual DOM) 업데이트 알고리즘을 개선하여 성능을 향상시켰습니다. 렌더링 성능이 개선되어 더 효율적인 업데이트를 가능케 합니다.

2. Composition API:

• Vue.js 3에서는 Composition API가 도입되었습니다. 이는 코드를 더 모듈화하고 재사용 가능한 로직을 쉽게 추상화할 수 있도록 하는 새로운 방식의 API입니다.
• Vue.js 2에서는 Options API가 주로 사용되었지만, Composition API는 더 유연하고 강력한 코드 구조를 제공합니다.

Vue.js2 Options API 

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js 2!',
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!';
    },
  },
};
</script>

 - data 속성과 methods 옵션을 사용하여 상태와 메서드를 정의하고, 템플릿에서 해당 데이터와 메서드를 사용합니다.

Vue.js 3 Cpmposition API 

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue.js 3!');

    function changeMessage() {
      message.value = 'Message changed!';
    }

    return {
      message,
      changeMessage,
    };
  },
};
</script>

 - setup 함수를 사용하여 상태와 메서드를 정의합니다.

 - ref 함수를 사용하여 반응적인 데이터를 만들고, setup 함수에서 해당 데이터와 메서드를 반환합니다.

 - 이를 사용하여 템플릿에서 데이터와 메서드를 사용합니다.

 

3. 퍼포먼스 최적화:

• Vue.js 3는 더 작은 번들 크기와 빠른 초기 로딩을 위해 모듈화된 설계와 Tree-shaking을 통한 최적화가 이루어졌습니다.

<!-- main.js -->
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

 

 

4. 타입스크립트 지원:

• Vue.js 3는 타입스크립트를 공식적으로 지원합니다. 이는 개발자에게 코드를 더 안정적이고 유지보수하기 쉽게 만들어주는 장점을 제공합니다.

// App.vue
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello, Vue.js 3 with TypeScript!',
    };
  },
});
</script>

 

5. Fragment:

• Vue.js 3에서는 더 이상 불필요한 DOM 래퍼 요소가 필요하지 않고 여러 노드를 그룹화하기 위한 Fragment 문법이 도입되었습니다.

Vue.js 3 Fragment:

<template>
  <div>
    <h1>Main App</h1>
    <FragmentExample />
  </div>
</template>

<script>
import FragmentExample from './FragmentExample.vue';

export default {
  components: {
    FragmentExample,
  },
};
</script>

// FragmentExample.vue
<template>
  <>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </>
</template>

 - <>와 </>를 사용하여 Fragment를 생성하고 여러 요소를 묶어서 사용합니다.

 - 이를 통해 불필요한 래퍼 요소를 생성하지 않고 여러 요소를 그룹화합니다.

 

6.  Teleport:

• Vue.js 3에는 Portal의 개념을 기반으로 하는 Teleport라는 새로운 컴포넌트가 추가되었습니다. 이를 사용하면 DOM 트리에서 자식을 특정 위치로 이동시킬 수 있습니다.

Vue.js 3 Teleport:

<template>
  <div>
    <h1>Main App</h1>
    <TeleportDestination />
  </div>
</template>

<script>
import TeleportDestination from './TeleportDestination.vue';

export default {
  components: {
    TeleportDestination,
  },
};
</script>

// TeleportDestination.vue
<template>
  <Teleport to="#destination">
    <h2>Teleported Heading</h2>
  </Teleport>
</template>

<script>
import { Teleport } from 'vue';

export default {
  components: {
    Teleport,
  },
};
</script>

 - Teleport 컴포넌트를 사용하여 자식 컴포넌트의 요소를 다른 위치로 이동시킵니다.

 

7.  데이터 반응성( Reactivity ) 개선:

• Vue.js 3는 반응성을 개선하여 더 많은 상황에서 반응적인 데이터를 더 효과적으로 처리할 수 있게 되었습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue.js 3!',
    });

    function changeMessage() {
      state.message = 'Message changed!';
    }

    return {
      message: state.message,
      changeMessage,
    };
  },
};
</script>

 

 - reactive 함수를 사용하여 상태를 만들고, setup 함수에서 해당 상태를 반환합니다.

 - 함수형 API를 사용하여 상태를 조작하고 템플릿에서 사용할 수 있습니다.