Vue 3.0 應(yīng)用配置

config 是一個包含了 Vue 應(yīng)用全局配置的對象。你可以在應(yīng)用掛載前修改其以下 property：

const app = Vue.createApp({})


app.config = {...}

#errorHandler

• 類型：Function
• 默認(rèn)：undefined
• 用法：

app.config.errorHandler = (err, vm, info) => {
  // 處理錯誤
  // `info` 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子
}

指定一個處理函數(shù)，來處理組件渲染方法執(zhí)行期間以及偵聽器拋出的未捕獲錯誤。這個處理函數(shù)被調(diào)用時，可獲取錯誤信息和應(yīng)用實例。

錯誤追蹤服務(wù) Sentry 和 Bugsnag 使用此選項提供官方集成。

#warnHandler

• 類型：Function
• 默認(rèn)：undefined
• 用法：

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` 是組件的繼承關(guān)系追蹤
}

為 Vue 的運行時警告指定一個自定義處理函數(shù)。注意這只會在開發(fā)環(huán)境下生效，在生產(chǎn)環(huán)境下它會被忽略。

#globalProperties

• 類型：[key: string]: any
• 默認(rèn)：undefined
• 用法：

app.config.globalProperties.foo = 'bar'


app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

添加可以在應(yīng)用程序內(nèi)的任何組件實例中訪問的全局 property。屬性名沖突時，組件的 property 將具有優(yōu)先權(quán)。

這可以代替 Vue 2.x Vue.prototype 擴展：

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}


// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

#isCustomElement

• 類型：(tag: string) => boolean
• 默認(rèn)：undefined
• 用法：

// 任何以“ion-”開頭的元素都將被識別為自定義元素
app.config.isCustomElement = tag => tag.startsWith('ion-')

指定一個方法，用來識別在 Vue 之外定義的自定義元素（例如，使用 Web Components API）。如果組件符合此條件，則不需要本地或全局注冊，并且 Vue 不會拋出關(guān)于 Unknown custom element 的警告。

注意，所有原生 HTML 和 SVG 標(biāo)記不需要在此函數(shù)中匹配——Vue 解析器自動執(zhí)行此檢查。

#optionMergeStrategies

• 類型：{ [key: string]: Function }
• 默認(rèn)：{}
• 用法：

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

為自定義選項定義合并策略。

合并策略選項分別接收在父實例和子實例上定義的該選項的值作為第一個和第二個參數(shù)，引用上下文實例被作為第三個參數(shù)傳入。

• 參考：自定義選項合并策略

#performance

• 類型：boolean
• 默認(rèn)：false
• 用法：

設(shè)置為 true 以在瀏覽器開發(fā)工具的 performance/timeline 面板中啟用對組件初始化、編譯、渲染和更新的性能追蹤。只適用于開發(fā)模式和支持 performance.mark API 的瀏覽器。