vue: Vue 3 새롭게 달라진 점

새로워진 Vue 상징 with chatGPT

 

Vue 3는 Vue.js의 최신 버전으로, 성능 향상과 더 많은 기능을 제공하는 Javascript 프레임워크입니다. Vue는 주로 사용자 인터페이스와 단일 페이지 애플리케이션(SPA)을 만들 때 많이 사용되며, Vue3는 컴포지션 API와 같은 새로운 기능을 도입하여 더 많은 유연성을 제공합니다.

vue 3의 주요 특징

1.  컴포지션  API (composition API)

• Vue 3에서 새롭게 추가된 컴포지션  API는 컴포넌트 로직을 함수로 모듈화해 코드의 재사용성과 가독성을 높였습니다.
• 기본 옵션 API (Options API) 대신 setup() 함수를 사용하여 상태, 반응성, 라이프사이클 훅 등을 정의할 수 있습니다.

import { ref, onMounted } from 'vue';

export default {
	setup(){
    	const count = ref(0);
        
        function increment(){
        	count.value++;
        }
        
        onMounted(() => {
        	console.log("Component mounted");
        });
        
        return { count, increment };
    },
};

 

2. 반응형 시스템 개선

• Vue 3의 반응성 시스템은 Proxy를 사용하여 반응성 성능을 크게 향상시켰습니다.
• reactive() 와 ref() 로 상태를 선언하고, 반응형 데이터를 쉽게 추적할 수 있습니다.

import { reactive } from 'vue';

const status = reactive({
	name: 'alice',
    age: 25
});

 

3. 향상된 성능

• Proxy 기반의 반응성 시스템과 개선된 렌더링 성능 덕분에 Vue 3는 대규모 애프리케이션에도 빠르고 효율적으로 동작합니다.
• 패키지의 크기가 줄었고, 렌더링 성능이 최적화되었습니다.

4. 프래그먼트 ( Fragment )

• Vue 3는 여러 루트 엘리먼트를 포함한 컴포넌트를 만들 수 있습니다. 이는 부모 태그 없이도 여러 요소를 반환할 수 있게 해줍니다.

<template>
	<h1>title</h1>
    <p>Description</p>
</template>

 

5. Teleport

• teleport 는 특정 HTML 요소 외부에 콘텐츠를 렌더링할 때 사용합니다. 주로 모달, 알림창 등 특정위치에 독립적으로 렌더링이 필요한 컴포넌트에 유용합니다.

<template>
	<teleport to="body">
    	<div class="modla">This is a modal</div>
    </teleport>
</template>

 

6. Composition API 와  Options API의 호환성

• Vue 3에서는 Composition API와 Option API를 동시에 사용할 수 있어, 기존 Vue 2의 옵션 스타일과 새로운 Composition API 스타일을 함께 사용하거나 점진적으로 이동할 수 있습니다.

 

Vue 3의 기본 구조 예시

main.js

import { createApp } from 'vue';
import App from './App.vue';

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

 

App.vue

<template>
	<div class="dv-center">
    	<p>{{ message }}</p>
        <button @click="changeMessage">Change Message</button> 
    </div>
</template>

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

export default {
	setup() {
    	const message = ref("Hello, Vue 3!");
        
        function changeMessage() {
        	message.value ="Hello, World!"
        }
        
        return { message, changeMessage };
    }
};
</script>

<style>
.div-center{text-align:center;}
</style>

 

Vue 3 생태계

• Vue Router: SPA에서 라우팅을 관리하는 라이브러리로, Vue 3와 호환됩니다.
• Vuex: 전역 상태 관리를 위한 라이브러리로 Vue 3에서도 사용 가능하며, Vue 3에서 Reactivity API를 통해 직접적으로 상태관리를 하는 것도 가능합니다.
• vite: vue 3에 최적화된 빌드 툴로, 빠른 개발 환경을 제공합니다. 

Vue 3는 단순한 학습 곡선, 유연성, 그리고 강력한 반응성 시스템을 통해 다양한 웹 애플리케이션을 만드는 데 탁월한 선택입니다.