[Vue] Vue 전역화 하는 방법 ( feat. config.globalProperties vs prototype )

Vue에서 외부라이브러리를 전역화하는 녀석이 있는데 바로 config.globalProperties이다.

근데 이녀석은 Vue3에서 새로 나온 녀석이라, Vue2에서의 전역화 하는 방식과는 다르다. 그래서 오늘은

Vue2와 Vue3에서의 전역화의 차이점을 정리하려고 한다.

 

전역화란?

 

해당하는 모든 컴포넌트들에서 사용 가능하도록 전역으로 등록하는 것을 의미한다. 예를 들면 아래와 같다.

 

내가 이해한 건 이런 느낌인데.. 아닐 수도 있다. 어쨌든 해당 하는 컴포넌트들에서 사용 가능하도록 하는 것이

전역화이다. 라고 이해하면 되지 않을까?

 

Vue2

import axios from 'axios';

Vue.prototype.$axios = axios;

new Vue({
	el:#app,
	components: { App },
	template: '<App/>'
});

 

Vue3

import axios from "axios"; -- axios import

const app = createApp(App) 
app.config.globalProperties.$axios = axios; -- axios 전역화
app.mount('#app') -- app으로 뷰인스턴스 생성

 

Vue2에서는 prototype을 사용해서 전역화를 했지만, Vue3부터는 globalProperties를 이용해서 전역화 하는 것으로

변경되었다. 이외에도 Vue3에서는 globalProperties 뿐만 아니라 provide / inject이라는 새로운 전역 변수를 설정할 수도 있으니 궁금한 사람은 찾아보길 바란다.

 

결론

Vue2 : prototype 사용

Vue3 : globalProperties 사용