Vue官方文件梳理-全域性配置
optionMergeStrategies
用於自定義選項的合併策略,Vue已經預定義了一些自己配置項的合併策略,如下圖所示。
比如props、methods、computed就是同一個策略:子配置項會覆蓋父級配置項。原始碼如下:
var strats = config.optionMergeStrategies;
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) {
if (!childVal) { return Object.create(parentVal || null ) }
if (!parentVal) { return childVal }
var ret = Object.create(null);
extend(ret, parentVal);
extend(ret, childVal);
return ret
};
什麼時候才會用到這些配置的合併規則呢?查閱原始碼,發現只要呼叫mergeOptions時,就會用到上面的策略。總結下來有以下幾種場景:
- 使用了 Vue.mixin 或 mixins 配置項
- 使用了 Vue.extend 或 extends 配置項或Vue.component(背後實際上是呼叫了Vue.extend)
- new Vue() 或 new Vue.extend()
單獨使用一個時,也會觸發合併規則,但是隻會有child包含配置項,所以不需要合併。只有當多個一起使用時,比如 Vue.compeont 和 extends 、mixins 配置項一起使用,這個時候就parent和child都會有相同的配置項,這時候也才有所謂的合併,舉個完整的例子來說明上述的場景。
Vue.config.optionMergeStrategies['customOption'] = function (toVal, fromVal) {
console.log(toVal, fromVal)
if (!toVal) return fromVal
if (!fromVal) return toVal
// toVal 和 fromVal 同時存在,表明此時parent和child都包含配置型
return toVal + '&' + fromVal
}
Vue.extend({
customOption: 'Vue.extend'
})
Vue.component('custom', {
customOption: 'Vue.component'
})
var vm = new Vue({
customOption: 'newVue',
extends: {
customOption: 'extends'
},
mixins: [{
customOption: 'mixins'
}]
})
console.log(vm.$options.customOption)
控制檯列印如下:
按順序解釋如下:
- undefined
"Vue.extend"合併 Vue.options 和 extendOptions
- undefined
"Vue.component"合併 Vue.options 和 extendOptions
- undefined
"extends"extends配置項合併先於mixins,此時合併的是 Vue.options 和extends配置,因此toVal是undefined
- extends
mixins完成了extends合併,接著就是mixins,此時 Vue.options 上已經包含了extends的配置項,因此 toVal 是extends,fromVal就是mixins。最終合併後的值:extends&mixins
- extends&mixins
newVue完成了extends和mixins後,最終合併vm.constructor和例項的options
- extends&mixins&newVue最終合併後的
customOption 的選項值
devtools
把下載的檔案拖到擴充套件程式頁面即可完成安裝。
errorHandler
Vue 涉及到執行使用者配置的地方都放在 try catch 中,因此即使你 throw 丟擲錯誤,整個例項也不會掛。
Vue.config.errorHandler = function (err, vm, info) {
console.log(arguments)
}
new Vue({
created: function () {
throw "error msg"
}
})
// ["error msg", Vue$3, "created hook"]
ignoredElements
首先要理解忽略的到底是什麼?是元素本身還是包括元素裡的內容(就像v-pre一樣),首先要知道這個配置的背景,官網舉了Web Components APIs(以下簡稱WCA)的例子,WCA和Vue.component一樣,也可以自定義元素,不過這個目前還是個草案。那麼對於Vue來講,元素就可以分為:HTML原生元素,Vue自定義元素,WCA自定義元素。那麼對於一個元素,Vue的判斷順序:原生
> Vue自定義 > ignoredElements > 無法識別,對於無法識別的Vue會假定你可能把Vue自己定義元素拼錯了,因此會發出Unknown
custom element的警告。另外:
- Vue定義和HTML標籤同名的元素是無效的,比如定義Vue.compoent('header',{})
- ignoredElements包含Vue定義的元素是無效的
- WCA自定義元素可以被構建虛擬dom
performance(2.2.0+)
只能在開發版上使用。caniuse上查詢 performance 可知主流瀏覽器都已經支援,這個可以用於分析Vue元件在不同階段中花費的時間,進而知道哪裡可以優化。檢視原始碼,發現在以下階段加上了performance.measure。
- performance.measure((元件名+
" render"), startTag, endTag);
- performance.measure((元件名+
" patch"), startTag, endTag);
- performance.measure((元件名
+ " init"), startTag, endTag);
- performance.measure(((元件名 + " compile"), 'compile', 'compile end');
比如在谷歌瀏覽器中檢視自定義元件Vue.component('my-component')的各個階段花費的時間:
在 IE11 中檢視
productionTip(2.2.0+)
對於開發版本,會預設向控制檯列印:
設定為false就不再顯示。