# 전역 API
CDN 빌드를 사용하는 경우 전역 Vue
개체를 통해 전역 API의 함수에 접근 할 수 있습니다.
예 :
const { createApp, h, nextTick } = Vue
ES 모듈을 사용하는 경우 바로가져올 수 있습니다:
import { createApp, h, nextTick } from 'vue'
reactive
및 ref
와 같이 반응성을 처리하는 전역 함수는 별도 문서에서 설명합니다. 해당 기능은 Reactivity API를 참조하세요.
# createApp
애플리케이션 컨텍스트를 제공하는 애플리케이션 인스턴스를 반환합니다. 애플리케이션 인스턴스에 의해 마운트된 컴포넌트 트리 전체가 동일한 컨텍스트를 공유합니다.
const app = createApp({})
createApp
이후에 다른 메서드를 연결할 수 있으며 Application API에서 찾을 수 있습니다.
# 전달인자
이 함수는 첫 번째 매개변수로 루트 컴포넌트 옵션 객체를 받습니다.
const app = createApp({
data() {
return {
...
}
},
methods: {...},
computed: {...}
...
})
2
3
4
5
6
7
8
9
10
두 번째 매개 변수를 사용하면 루트 props를 애플리케이션에 전달할 수 있습니다.
const app = createApp(
{
props: ['username']
},
{ username: 'Evan' }
)
2
3
4
5
6
<div id="app">
<!-- 'Evan'이 표시됩니다. -->
{{ username }}
</div>
2
3
4
# 작성법
interface Data {
[key: string]: unknown
}
export type CreateAppFunction<HostElement> = (
rootComponent: PublicAPIComponent,
rootProps?: Data | null
) => App<HostElement>
2
3
4
5
6
7
8
# h
일반적으로 VNode로 축약되는 "가상 노드(virtual node)"를 반환합니다. 이는 모든 하위 노드에 대한 설명을 포함하여 페이지에서 어떤 종류의 노드를 렌더링해야 하는지 Vue에 설명하는 정보가 포함된 일반 객체입니다. 수동으로 작성된 렌더 함수를 위한 것입니다.
render() {
return h('h1', {}, 'Some title')
}
2
3
# 전달인자
허용된 세 가지 인자: tag
, props
, children
# tag
Type:
String | Object | Function
Details:
HTML 태그 이름, 컴포넌트, 비동기 컴포넌트입니다. null을 반환하는 함수를 사용하면 주석이 렌더링됩니다. 이 매개변수는 필수입니다.
# props
Type:
Object
Details:
템플릿에서 사용하는 attributes, props, events에 해당하는 객체입니다. (선택사항)
# children
Type:
String | Array | Object
Details:
h()
를 사용하여 빌드하거나 문자열을 사용하여 "text VNodes"나 슬롯이 있는 객체를 가져오는 하위 VNode입니다. (선택사항)h('div', {}, [ 'Some text comes first.', h('h1', 'A headline'), h(MyComponent, { someProp: 'foobar' }) ])
1
2
3
4
5
6
7
# defineComponent
구현 측면에서 defineComponent
는 전달된 객체를 반환하는 것 외에는 아무것도 하지 않습니다. 그러나 입력에 관해서는, 반환된 값에는 수동 렌더링 함수, TSX 및 IDE 도구의 지원을 위한 생성자의 합성 유형(synthetic type)이 있습니다.
# 전달인자
컴포넌트 옵션이 있는 객체
import { defineComponent } from 'vue'
const MyComponent = defineComponent({
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++
}
}
})
2
3
4
5
6
7
8
9
10
11
12
또는 setup
함수 사용 시에는 함수명이 컴포넌트명으로 사용됩니다.
import { defineComponent, ref } from 'vue'
const HelloWorld = defineComponent(function HelloWorld() {
const count = ref(0)
return { count }
})
2
3
4
5
6
# defineAsyncComponent
필요한 경우에만 로드되는 비동기 컴포넌트를 만듭니다.
# 전달인자
기본적인 사용법을 위해 defineAsyncComponent
는 Promise
를 반환하는 팩토리 함수를 허용할 수 있습니다. Promise의 resolve
콜백은 서버에서 컴포넌트 정의를 검색할 때 호출되어야 합니다. 또한 reject(reason)
를 호출하여 로드가 실패했음을 나타낼 수도 있습니다.
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)
2
3
4
5
6
7
로컬 등록을 사용하는 경우 Promise
를 반환하는 함수를 직접 제공 할 수 있습니다.
import { createApp, defineAsyncComponent } from 'vue'
createApp({
// ...
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
})
2
3
4
5
6
7
8
9
10
고급 사용을 위해 defineAsyncComponent
는 객체를 허용할 수 있습니다.
defineAsyncComponent
메서드는 다음과 같은 형식의 객체를 반환할 수 있습니다.
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent({
// 팩토리 함수
loader: () => import('./Foo.vue')
// 비동기 컴포넌트가 로드되는 동안 사용할 컴포넌트
loadingComponent: LoadingComponent,
// 로드가 실패할 경우 사용할 컴포넌트
errorComponent: ErrorComponent,
// 로딩 컴포넌트가 보여지기 전 지연시간. 기본값: 200ms.
delay: 200,
// 주어진 시간이 초과되면 오류 컴포넌트가 표시됩니다.
// 기본값: Infinity.
timeout: 3000,
// 컴포넌트가 사용 가능한지 정의합니다. 기본값: true.
suspensible: false,
/**
*
* @param {*} error 에러 메시지 객체
* @param {*} retry 로더 프로미스가 reject될 때, 비동기 컴포넌트가 재시도하는지에 대한 여부를 나타내는 함수
* @param {*} fail 실패의 끝
* @param {*} attempts 허용되는 최대 재시도 수
*/
onError(error, retry, fail, attempts) {
if (error.message.match(/fetch/) && attempts <= 3) {
// fetch 에러시 재시도, 최대 3회 시도
retry()
} else {
// retry/fail는 promise의 resolve/reject와 같습니다:
// 오류 처리를 계속하려면 그 중 하나를 호출해야 합니다.
fail()
}
},
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
참조: 동적 & 비동기 컴포넌트
# resolveComponent
WARNING
resolveComponent
는 render
나 setup
함수 내에서만 사용할 수 있습니다.
현재 애플리케이션 인스턴스에서 접근 가능한 경우, 컴포넌트의 이름으로 component
를 리졸빙(Resolving) 할수 있습니다.
찾을 수 없는 경우 Component
또는 인자로 주어진 name
를 반환합니다.
const app = createApp({})
app.component('MyComponent', {
/* ... */
})
2
3
4
import { resolveComponent } from 'vue'
render() {
const MyComponent = resolveComponent('MyComponent')
}
2
3
4
# 전달인자
허용되는 인자: name
# name
Type:
String
Details:
로드된 component 이름입니다.
# resolveDynamicComponent
WARNING
resolveDynamicComponent
는 render
또는 setup
함수 내에서만 사용할 수 있습니다.
<component :is="">
로 사용하는 것과 동일한 메커니즘으로 component
를 resolve할 수 있습니다.
resolve된 Component
또는 컴포넌트 이름을 노드 태그로 사용하여 새로 생성된 VNode
를 반환합니다. Component
를 찾을 수 없는 경우 경고를 발생시킵니다.
import { resolveDynamicComponent } from 'vue'
render () {
const MyComponent = resolveDynamicComponent('MyComponent')
}
2
3
4
# 전달인자
허용되는 인자: component
# component
Type:
String | Object (component’s options object)
Details:
자세한 내용은 동적 컴포넌트 문서를 참조하세요.
# resolveDirective
WARNING
resolveDirective
는 render
또는 setup
함수 내에서만 사용할 수 있습니다.
현재 애플리케이션 인스턴스에서 사용가능한 경우 해당 이름으로 directive
를 확인할 수 있습니다.
찾을 수 없는 경우 Directive
또는 undefined
를 반환합니다.
const app = createApp({})
app.directive('highlight', {})
2
import { resolveDirective } from 'vue'
render () {
const highlightDirective = resolveDirective('highlight')
}
2
3
4
# 전달인자
허용되는 인자: name
# name
Type:
String
Details:
로드된 directive 이름입니다.
# withDirectives
warning withDirectives
는 render
또는 setup
함수 내에서만 사용할 수 있습니다.
:::
디렉티브를 VNode에 적용할 수 있습니다. 적용된 디렉티브를 가진 VNode를 돌려줍니다.
import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')
return withDirectives(h('div'), [
[foo, this.x],
[bar, this.y]
])
2
3
4
5
6
7
8
# 전달인자
허용되는 인자: vnode
, directives
.
# vnode
Type:
vnode
Details:
일반적으로
h()
로 생성되는 가상노드
# directives
Type:
Array
Details:
디렉티브의 배열입니다.
각각의 디렉티브 자체는 배열이며, 다음의 예제와 같이 최대 4 개의 인덱스를 정의 할 수 있습니다.
[directive]
- 디렉티브 자체 (필수)
const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives( h('div'), [ [MyDirective] ] )
1
2
3
4
5[directive, value]
- 디렉티브에 할당 할any
유형의 값
const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]])
1
2[directive, value, arg]
-문자열
인수,v-on:click
에서click
const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives(h('div'), [ [MyDirective, 100, 'click'] ])
1
2
3
4[directive, value, arg, modifiers]
- 모든 수식어를 정의하는key: value
형태의객체(Object)
const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives(h('div'), [ [MyDirective, 100, 'click', { prevent: true }] ])
1
2
3
4
# createRenderer
createRenderer 함수는 호스트 환경의 노드 및 엘레멘트 타입에 해당하는 두가지 일반 전달인자인 HostNode
과 HostElement
를 허용합니다.
예를 들어, runtime-dom의 경우 HostNode는 DOM Node
인터페이스가 되고, HostElement는 DOM Element
인터페이스가 됩니다.
커스텀 렌더러는 다음과 같은 플랫폼 특정 유형을 전달할 수 있습니다.
import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
patchProp,
...nodeOps
})
2
3
4
5
# 전달인자
허용되는 인자: HostNode
, HostElement
# HostNode
Type:
Node
Details:
호스트 환경의 노드입니다.
# HostElement
Type:
Element
Details:
호스트 환경의 요소입니다.
# nextTick
다음 DOM 업데이트 주기 후에 콜백이 실행되도록 연기합니다. DOM 업데이트를 기다리는 위해 일부 데이터를 변경한 후에 즉시 사용합니다.
import { createApp, nextTick } from 'vue'
const app = createApp({
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}
})
2
3
4
5
6
7
8
9
10
11
12
# mergeProps
VNode props를 포함하는 다수의 객체 가져와, 단일 개체로 병합합니다. 새로 생성 된 객체가 반환되며, 인자로 전달 된 객체는 변경되지 않습니다.
Any number of objects can be passed, with properties from later arguments taking precedence. Event listeners are handled specially, as are class
and style
, with the values of these properties being merged rather than overwritten.
갯수에 상관없이 객체를 넘길수 있으며, 뒤에 넘겨진 객체가 우선권을 가집니다. 이벤트 리스너는 class
및 style
과 같이 특별히 처리되며 이러한 속성의 값은 덮어 쓰지 않고 병합됩니다.
import { h, mergeProps } from 'vue'
export default {
inheritAttrs: false,
render() {
const props = mergeProps({
// `class` $attrs의 모든 `class`와 병합됩니다.
class: 'active'
}, this.$attrs)
return h('div', props)
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# useCssModule
WARNING
useCssModule
can only be used within render
or setup
functions.
useCssModule
함수는 render
와 setup
함수 내에서만 사용할수 있습니다.
싱글 파일 컴포넌트의 [setup
] (/api/composition-api.html#setup) 함수 내에서 CSS 모듈에 액세스 할 수 있습니다.
<script>
import { h, useCssModule } from 'vue'
export default {
setup () {
const style = useCssModule()
return () => h('div', {
class: style.success
}, 'Task complete!')
}
}
</script>
<style module>
.success {
color: #090;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CSS 모듈 사용에 대한 자세한 내용은 Vue Loader - CSS Modules (opens new window)을 참조하세요.
# 인자
단 하나의 인자만 받습니다: name
# name
Type:
String
Details:
CSS 모듈의 이름. 기본값은
'$style'
.
# version
설치된 Vue의 버전을 문자열로 반환합니다.
const version = Number(Vue.version.split('.')[0])
if (version === 3) {
// Vue 3
} else if (version === 2) {
// Vue 2
} else {
// Unsupported versions of Vue
}
2
3
4
5
6
7
8
9
See also: Application API - version