Vue全局配置

前言

本文主要介紹Vue.config的全局配置的用法。
Vue.config 是一個對象,包含 Vue 的全局配置。可以在啓動應用之前修改下列屬性:

silent

  • 類型:boolean
  • 默認值:fasle
  • 用法:
Vue.config.silent = true

取消 Vue 所有的日誌與警告。

optionMergeStrategies

  • 類型:{ [key: string]: Function }

  • 默認值:{}

  • 用法:

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}
const Profile = Vue.extend({
  _my_option: 1
})
// Profile.options._my_option = 2

自定義合併策略的選項。
合併策略選項分別接收在父實例和子實例上定義的該選項的值作爲第一個和第二個參數,Vue 實例上下文被作爲第三個參數傳入。

devtools

  • 類型:boolean

  • 默認值:true (生產版爲 false)

用法:

// 務必在加載 Vue 之後,立即同步設置以下內容
Vue.config.devtools = true

配置是否允許 vue-devtools 檢查代碼。開發版本默認爲 true,生產版本默認爲 false。生產版本設爲 true 可以啓用檢查。

errorHandler

  • 類型:Function

  • 默認值:undefined

用法:

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的錯誤信息,比如錯誤所在的生命週期鉤子
  // 只在 2.2.0+ 可用
}

指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時,可獲取錯誤信息和 Vue 實例。
從 2.2.0 起,這個鉤子也會捕獲組件生命週期鉤子裏的錯誤。同樣的,當這個鉤子是 undefined 時,被捕獲的錯誤會通過 console.error 輸出而避免應用崩潰。
從 2.4.0 起,這個鉤子也會捕獲 Vue 自定義事件處理函數內部的錯誤了。
從 2.6.0 起,這個鉤子也會捕獲 v-on DOM 監聽器內部拋出的錯誤。另外,如果任何被覆蓋的鉤子或處理函數返回一個 Promise 鏈 (例如 async 函數),則來自其 Promise 鏈的錯誤也會被處理。
錯誤追蹤服務 Sentry 和 Bugsnag 都通過此選項提供了官方支持。

warnHandler

  • 類型:Function
  • 默認值:undefined
  • 用法:
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是組件的繼承關係追蹤
}

爲 Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效,在生產環境下它會被忽略。

ignoreElements

  • 類型:Array<string | RegExp>
  • 默認值:[]
  • 用法:
Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // 用一個 `RegExp` 忽略所有“ion-”開頭的元素
  // 僅在 2.5+ 支持
  /^ion-/
]

須使 Vue 忽略在 Vue 之外的自定義元素 (e.g. 使用了 Web Components APIs)。否則,它會假設你忘記註冊全局組件或者拼錯了組件名稱,從而拋出一個關於 Unknown custom element 的警告。

keyCodes

  • 類型:{ [key: string]: number | Array<number> }
  • 默認值:{}
  • 用法:
Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用雙引號括起來
  "media-play-pause": 179,
  up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">

v-on 自定義鍵位別名。

performance

  • 類型:boolean
  • 默認值:false (自 2.2.3 起)
  • 用法:

設置爲 true 以在瀏覽器開發工具的性能/時間線面板中啓用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用於開發模式和支持 performance.mark API 的瀏覽器上。

productionTips

  • 類型:boolean
  • 默認值:true
  • 用法:

設置爲 false 以阻止 vue 在啓動時生成生產提示。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章