本文主要介紹了Vue官方文檔梳理之全局配置，分享給大家，也給自己留個(gè)筆記。具體如下：

創(chuàng)新互聯(lián)建站專注于九江企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。九江網(wǎng)站建設(shè)公司,為九江等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

optionMergeStrategies

用于自定義選項(xiàng)的合并策略，Vue已經(jīng)預(yù)定義了一些自己配置項(xiàng)的合并策略，如下圖所示。

比如props、methods、computed就是同一個(gè)策略：子配置項(xiàng)會(huì)覆蓋父級配置項(xiàng)。源碼如下：

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
};

什么時(shí)候才會(huì)用到這些配置的合并規(guī)則呢？查閱源碼，發(fā)現(xiàn)只要調(diào)用mergeOptions時(shí)，就會(huì)用到上面的策略。總結(jié)下來有以下幾種場景：

1. 使用了 Vue.mixin 或 mixins 配置項(xiàng)
2. 使用了 Vue.extend 或 extends 配置項(xiàng)或Vue.component（背后實(shí)際上是調(diào)用了Vue.extend）
3. new Vue() 或 new Vue.extend()

單獨(dú)使用一個(gè)時(shí)，也會(huì)觸發(fā)合并規(guī)則，但是只會(huì)有child包含配置項(xiàng)，所以不需要合并。只有當(dāng)多個(gè)一起使用時(shí)，比如 Vue.compeont 和 extends 、mixins 配置項(xiàng)一起使用，這個(gè)時(shí)候就parent和child都會(huì)有相同的配置項(xiàng)，這時(shí)候也才有所謂的合并，舉個(gè)完整的例子來說明上述的場景。

Vue.config.optionMergeStrategies['customOption'] = function (toVal, fromVal) {
  console.log(toVal, fromVal)
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  // toVal 和 fromVal 同時(shí)存在，表明此時(shí)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)

控制臺(tái)打印如下：

按順序解釋如下：

1. undefined "Vue.extend"合并 Vue.options 和 extendOptions
2. undefined "Vue.component"合并 Vue.options 和 extendOptions
3. undefined "extends"extends配置項(xiàng)合并先于mixins，此時(shí)合并的是 Vue.options 和extends配置，因此toVal是undefined
4. extends mixins完成了extends合并，接著就是mixins，此時(shí) Vue.options 上已經(jīng)包含了extends的配置項(xiàng)，因此 toVal 是extends，fromVal就是mixins。最終合并后的值：extends&mixins
5. extends&mixins newVue完成了extends和mixins后，最終合并vm.constructor和實(shí)例的options
6. extends&mixins&newVue最終合并后的 customOption 的選項(xiàng)值
   

devtools

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

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

errorHandler

Vue 涉及到執(zhí)行用戶配置的地方都放在 try catch 中，因此即使你 throw 拋出錯(cuò)誤，整個(gè)實(shí)例也不會(huì)掛。

Vue.config.errorHandler = function (err, vm, info) {
  console.log(arguments)
}
new Vue({
  created: function () {
    throw "error msg"
  }
})
// ["error msg", Vue$3, "created hook"]

ignoredElements

首先要理解忽略的到底是什么？是元素本身還是包括元素里的內(nèi)容（就像v-pre一樣），首先要知道這個(gè)配置的背景，官網(wǎng)舉了Web Components APIs（以下簡稱WCA）的例子，WCA和Vue.component一樣，也可以自定義元素，不過這個(gè)目前還是個(gè)草案。那么對于Vue來講，元素就可以分為：HTML原生元素，Vue自定義元素，WCA自定義元素。那么對于一個(gè)元素，Vue的判斷順序：原生 > Vue自定義 > ignoredElements > 無法識別，對于無法識別的Vue會(huì)假定你可能把Vue自己定義元素拼錯(cuò)了，因此會(huì)發(fā)出Unknown custom element的警告。另外：

1. Vue定義和HTML標(biāo)簽同名的元素是無效的，比如定義Vue.compoent('header',{})
2. ignoredElements包含Vue定義的元素是無效的
3. WCA自定義元素可以被構(gòu)建虛擬dom

performance（2.2.0+）

只能在開發(fā)版上使用。caniuse上查詢 performance 可知主流瀏覽器都已經(jīng)支持，這個(gè)可以用于分析Vue組件在不同階段中花費(fèi)的時(shí)間，進(jìn)而知道哪里可以優(yōu)化。查看源碼，發(fā)現(xiàn)在以下階段加上了performance.measure。

1. performance.measure((組件名+ " render"), startTag, endTag);
2. performance.measure((組件名+ " patch"), startTag, endTag);
3. performance.measure((組件名 + " init"), startTag, endTag);
4. performance.measure(((組件名 + " compile"), 'compile', 'compile end');

比如在谷歌瀏覽器中查看自定義組件Vue.component('my-component')的各個(gè)階段花費(fèi)的時(shí)間：

在 IE11 中查看

productionTip（2.2.0+）

對于開發(fā)版本，會(huì)默認(rèn)向控制臺(tái)打印：

設(shè)置為false就不再顯示。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：Vue官方文檔梳理之全局配置
網(wǎng)頁路徑：http://www.chinadenli.net/article10/pgsogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、小程序開發(fā)、商城網(wǎng)站、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)