[Vue 3] Global API

Vue2는 인스턴스화된 애플리케이션을 지원하지 않았다.

따라서 Vue 2의 전역 API들은 생성된 모든 Vue 인스턴스들에 상태를 공유했다.

 

전역 컴포넌트를 만들거나,

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

전역 디렉티브를 만들었다.

Vue.directive('focus', {
  inserted: el => el.focus()
})

 

👉 동일한 Vue 생성자에서 생성된 모든 루트 인스턴스는 동일한 전역 구성을 공유한다.

createApp

createApp을 호출하면, Vue 3의 새로운 개념인 앱 인스턴스(app instance)가 반환된다.

경험상 Vue의 동작을 전역적으로 변경하는 모든 API가 이제 앱 인스턴스로 이동된다.

/* focus 디렉티브를 전역으로 생성하는 팩토리 함수 */
import { createApp } from 'vue'
import Foo from 'Foo.vue'
import Bar from 'Bar.vue'

const createMyApp = option => {
	const app = createApp(options)
    app.directive('focus' /* ... */)
    
    return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')

 

전역 API인 createApp는 애플리케이션 인스턴스를 생성한다.

Vue 그 자체가 아니고 독립된 것으로 다른 인스턴스들과 상태를 공유하지 않는다.

따라서 기존 Vue2에서 사용하던 Global API들이 Vue 3에서는 애플리케이션 API로 대체되었다.

Vue 2 전역 API	Vue 3 애플리케이션 API
Vue.config	app.config
Vue.config.productionTip	removed (see below)
Vue.config.ignoredElements	app.config.isCustomElement (see below)
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use (see below)

defineComponent

Vue3의 setup()을 이용해 객체를 생성하기 위해서는 defineComponent의 인자로 함수를 넣어주면 된다.

함수의 이름이 반환되는 값을 받는 변수의 이름과 동일해야 한다 !

반환되는 값의 이름은 그 컴포넌트의 이름이 된다.

const Card = defineComponent({
    name: "Card",
    props: { /* ... */ }
    template: ``,
})

defineAsyncComponent

Promise로 생성된 팩토리 함수를 인자로 받아 컴포넌트를 생성한다. 

* 팩토리 함수 : 객체를 반환하는 함수

일반적으로 애플리케이션 번들의 크기가 너무 크거나 자주 사용하지 않는 컴포넌트를 독립된 청크로 만들어서 필요할 때만 불러와 사용한다.

👉 비동기 컴포넌트 : Promise의 resolve를 이용해 반환되어야 한다.

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

반환된 AsyncComp는 페이지에서 실제로 렌더링될 때만 로더 함수를 호출하는 래퍼 컴포넌트이다.

 

💬 참고 https://ko.vuejs.org/guide/components/async

resolveComponent

컴포넌트의 이름으로 컴포넌트를 불러오며, 컴포넌트가 존재하지 않으면 null을 반환한다.

import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('ButtonCounter')

    return () => {
      return h(ButtonCounter)
    }
  }
}

렌더 함수 h
: DOM 노드(vnode)를 생성
: 첫 번째 인자는 문자열 또는 Vue 컴포넌트 정의 / 두 번째 인자는 전달할 prop / 세 번째 인자는 자식이다.

resolveDirective

directive를 이름으로 불러올 수 있는 전역 API이며 setup 함수 또는 render 함수에서만 사용 가능하다.

withDirectives

원하는 디렉티브를 하나의 VNode에 반영시킨 후, 반영이 완료된 VNode를 돌려준다.

import { widthDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirective(h('div'), [
    [foo, this.x],
    [bar, this.y]
])

foo,bar 디렉티브를 불러와 div라는 VNode를 생성한 후, 해당 div태그의 디렉티브로 v-foo="x"와 v-bar="y"를 생성한다.