vue3通過app.config進行配置

 

const app = Vue.createApp({})
app.config = {...}

 

errorHandler: 組件渲染方法執行期間及偵聽器拋出的未捕獲錯誤,可以獲取到錯誤信息和應用實例

app.config.errorHandle = (err, vm, info) => {
    // err:
    // vm:
    // info: 是vue特定的錯誤信息，比如錯誤所在的生命周期鈎子
}

 

warnHandler: 警告指定一個自定義處理函數，只有在開發環境生效，生產環境會被忽略

app.config.warnHandle = function(msg, vm, trace) => {
    // msg: 警告信息
    // vm: 組件實例
    // trace: 是組件的繼承關系追蹤
}

 

globalProperties: 向任何組件實例中添加可全局訪問的屬性

在vue2中: vue.prototype.$http = () => {}
在vue3中: app.config.globalproperties.$http = () => {}

 

isCustomElement: 用來識別Vue之外定義的自定義元素，如果組件符合此條件則不需要本地或全局注冊，並且Vue不會拋出 Unknown custon element的警告

app.config.isCustomElement = tag => tag.startWith('icon-')

 

optionMergeStrategies: 自定義選項合並策略 

const app = Vue.createApp({
  custom: 'hello!'
})

// 注意這里返回的先后順序，他會影響混入中打印出的結果
寫法一: app.config.optionMergeStrategies.custom = (toVal, fromVal) => fromVal || toVal
寫法二: app.config.optionMergeStrategies.custom = (toVal, fromVal) => toVal || fromVal

app.mixin({
  custom: 'goodbye!',
  created() {
    console.log(this.$options.custom) //  寫法一會打印出"hello",       寫法二會打印出 "goodbye!"
  }
})

 

 performance: 在瀏覽器開發工具中的performance/timeline面板中啟用對組件初始化、編譯渲染和更新的性能追蹤，但是只適用於performance.mark API的瀏覽器

app.config.performance = true