# 애플리케이션 설정(Application Config)
config
는 Vue 애플리케이션 전역 설정을 포함하는 객체입니다. 애플리케이션을 마운트하기 전에 아래 나열된 속성을 수정할 수 있습니다:
const app = Vue.createApp({})
app.config = {...}
2
3
# errorHandler
타입:
Function
기본값:
undefined
사용방법:
app.config.errorHandler = (err, vm, info) => {
// 에러 처리
// `info` 는 Vue 관련 에러 정보 입니다. 예) 라이프사이클 훅에 에러를 발견
// 에러가 발견되었습니다.
}
2
3
4
5
컴포넌트 렌더 함수와 감시자(watcher) 중에 포착되지 않은 에러에 대한 핸들러를 할당합니다. 핸들러는 에러 및 애플리케이션 인스턴스와 함께 호출됩니다.
에러 추적 서비스 Sentry (opens new window) 및 Bugsnag (opens new window)는 이 옵션을 사용하여 공식 통합을 제공합니다.
# warnHandler
타입:
Function
기본값:
undefined
사용방법:
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 는 컴포넌트 계층 추적입니다.
}
2
3
런타임 Vue 경고에 대한 커스텀 핸들러를 할당합니다. 이것은 개발 중에만 작동하며 프로덕션에서는 무시됩니다.
# globalProperties
타입:
[key: string]: any
기본값:
undefined
사용방법:
app.config.globalProperties.foo = 'bar'
app.component('child-component', {
mounted() {
console.log(this.foo) // 'bar'
}
})
2
3
4
5
6
7
애플리케이션 내의 모든 컴포넌트 인스턴스에서 접근할 수 있는 전역 속성을 추가합니다. 키가 충돌하는 경우 컴포넌트의 속성이 우선 적용됩니다.
이는 Vue 2.x의 Vue.prototype
확장을 대체 할 수 있습니다.
// 전
Vue.prototype.$http = () => {}
// 후
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
2
3
4
5
6
# isCustomElement
타입:
(tag: string) => boolean
기본값:
undefined
사용방법:
// 'ion-' 으로 시작하는 모든 엘리먼트는 커스텀 엘리먼트로 인식됩니다.
app.config.isCustomElement = tag => tag.startsWith('ion-')
2
Vue 외부에서 정의된 커스텀 엘리먼트를 인식하는 방법을 지정합니다(예 : 웹 컴포넌트 API 사용). 컴포넌트가 이 조건과 일치하면 로컬 또는 전역 등록이 필요하지 않으며, Vue 는 알 수없는 커스텀 엘리먼트(Unknown custom element)
에 대한 경고를 표시하지 않습니다.
모든 네이티브 HTML 및 SVG 태그는 이 함수에서 일치할 필요가 없습니다. Vue 파서는 이 검사를 자동으로 수행합니다.
# optionMergeStrategies
타입:
{ [key: string]: Function }
기본값:
{}
사용방법:
const app = Vue.createApp({
mounted() {
console.log(this.$options.hello)
}
})
app.config.optionMergeStrategies.hello = (parent, child, vm) => {
return `Hello, ${child}`
}
app.mixin({
hello: 'Vue'
})
// 'Hello, Vue
2
3
4
5
6
7
8
9
10
11
12
13
14
15
커스텀 옵션에 대한 병합 전략을 정의합니다.
병합 전략은 부모 및 자식 인스턴스에 정의된 해당 옵션의 값을 각각 첫 번째(parent)와 두 번째(child) 인수로 받습니다. 컨텍스트 애플리케이션 인스턴스는 세 번째(vm) 인수로 전달됩니다.
# performance
타입:
boolean
기본값:
false
사용방법:
브라우저 devtool의 performance / timeline 패널에서 컴포넌트 초기화, 컴파일, 렌더링 및 패치 성능 추적을 사용하려면 이 옵션 값을 true
로 설정하십시오. 개발 모드 및 performance.mark (opens new window) API 를 지원하는 브라우저에서만 작동합니다.