Vue官方文檔梳理之全局配置

來源：懂視網責編：小采時間：2020-11-27 22:25:09

Vue官方文檔梳理之全局配置

Vue官方文檔梳理之全局配置:本文主要介紹了Vue官方文檔梳理之全局配置，分享給大家，也給自己留個筆記。具體如下： optionMergeStrategies 用于自定義選項的合并策略，Vue已經預定義了一些自己配置項的合并策略，如下圖所示。比如props、methods、computed就是同一個策略：

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue官方文檔梳理之全局配置:本文主要介紹了Vue官方文檔梳理之全局配置，分享給大家，也給自己留個筆記。具體如下： optionMergeStrategies 用于自定義選項的合并策略，Vue已經預定義了一些自己配置項的合并策略，如下圖所示。比如props、methods、computed就是同一個策略：

本文主要介紹了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

離線下載chrome 擴展地址（不需要梯子）：https://www.crx4chrome.com/crx/11903/

把下載的文件拖到擴展程序頁面即可完成安裝。

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的警告。另外：