Vue2 to Vue3, 변경된 사항 정리

Vue 2 to Vue 3 migration 정리

주요 변경사항.

- Vue Instances/apps, Router, Vuex의 생성을 각각
: createApp(), createRouter(), createStore()으로 하게 됨

- data를 method안에 작성한다.
directives & third-party 모듈을 "App"안에 작성한다, 기존에는 global object안에 작성함.

새로 추가된 사항.
teleport component
fragments
(Optional) composition API - watch, computed 대신 사용 가능.
Better Typescript 

---

목차
1) App.vue의 'el'이 사라지고 mount를 사용
2) Data를 Object가 아닌 Method로 사용
3) 컴포넌트, directives 및 third-party모듈을 app에 register 해 사용한다.
4) router
5) vue store

---

1) App.vue의 'el'이 사라지고 mount를 사용

//vue2
new Vue({
	el: '#app',
    data: {...}
    methods: {...}
});

//vue3
Vue.createApp({
	...
}).mount('#app');; //css selector #

 

2) Data를 Object가 아닌 Method로 사용
vue2에서도 method로 사용하는 것이 더 권장되긴 했으나 둘 다 제공했었다. 

//vue2
data: {
	message : "message here"
}

//vue3
data() {
	return { message : "message here" };
}

- watch, computed, methods는 전과 동일하게 사용한다.

3) 컴포넌트, directives 및 third-party모듈을 app에 register 해 사용한다.

//vue2
Vue.component('componentName', {
	template: '...',
    mehods : {...}
});

//vue3
app.component('componentName', {
	template: '...',
    mehods : {...}
});

+ ) 추가된 사항
props와 같이 이제는 emit도 컴포넌트 내에서 선언하여 사용가능하다. (optional)

 

4) router

App.vue파일 변경사항.

import { createApp } from 'vue';
import { createRouter } from 'vue-router';
import App from './App.vue';

const router = createRouter({
	routes: [
    	{ path: '/', component: Home },
        { path: '/other', component: otherComponent }
    ]
});

const app = createApp(App)

app.use(router); //router 등록

app.mount('#app');

App.vue파일의 routerView 변경사항.

//vue2
<transition name="route" mode="out-in">
	<router-view></router-view>
</transition>

//vue3
//router-view가 transition을 감싸도록 변경되었다.
<router-view>
	<transition name="route" mode="out-in">
    	<component></component> //dynamic component
    </transition>
</router-view>

만약 페이지가 다 로딩된 후에만 transition이 실행되게 하고 싶은 경우엔 router.isReady()를 사용하면
처음 로딩될 때는 트랜지션효과가 일어나지 않는다.

router.isReady().then(() => {
  app.mount("#app");
});

 

5) vue store
기본적인 사용법은 vue2와 동일하나, 등록 방식만 달라짐.

import { createApp } from "vue";
import { createStore } from "vuex";

...

const store = createStore({
	state() {...},
    mutations: {...},
    actions: {...},
    getters: {...}
})

const app = createApp(App);
app.use(store);

app.mount("#app");