Vue.js 2.x API 知識梳理（一）

全局配置

Vue.config是一個對象，包含Vue的全局配置。可以在啟動應用之前修改指定屬性。
這里不是指的@vue/cli的vue.config.js。

Demo源碼

silent

Vue.config.silent = true;

optionMergeStrategies

服務于Vue的mixin，用以實現自定義混入規則。
合并策略選項分別接收在父實例和子實例上定義的該選項的值作為第一個和第二個參數，Vue實例上下文被作為第三個參數傳入。
參見Vue 混入。

devtools

配置是否允許vue-devtools檢查代碼。
開發版本默認為true，生產版本默認為false。

errorHandler

指定組件的渲染和觀察期間未捕獲錯誤的處理函數。
這個處理函數被調用時，可獲取錯誤信息和Vue實例。

Vue.config.errorHandler = function (err, vm, info) {
	// info 是Vue特定的錯誤信息，比如錯誤所在的生命周期鉤子
	console.log(err);
	console.log(vm);
	console.log(info);
};

new Vue({
	methods: {
		myGetter() {
			throw new Error('Bad!');
		}
	},
	created() {
		this.myGetter();
	}
});

運行可見下圖：

throw的錯誤沒有被瀏覽器捕獲，而是調用了errorHandler，并打印出了三個參數。

以下文本摘自文檔：

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

warnHandler

為Vue的運行時警告賦予一個自定義處理函數。
只在開發環境下生效。

<div id="app">
    <p>{{ Hello }}</p>
</div>

<script type="text/javascript">

    Vue.config.warnHandler = function (msg, vm, trace) {
        // trace 是組件的繼承關系追蹤
        console.log(msg);
        console.log(vm);
        console.log(trace);
    };

    new Vue({
        el: '#app'
    });
</script>

運行結果如圖：

可以看到即便不設置silent屬性，Vue的警告也不再控制臺拋出錯誤了，而是調用了warnHandler方法。

ignoredElements

使Vue忽略在Vue之外定義的自定義元素。
如果定義了第三方自定義元素而又未設置忽略，Vue會解析這些元素從而拋出錯誤。

Vue.config.ignoredElements = [
    'my-custom-web-component',
    'another-web-component', 
    // 用一個 `RegExp` 忽略所有“ion-”開頭的元素 
    // 僅在 2.5+ 支持 
    /^ion-/
]

keyCodes

給v-on自定義鍵位別名。

<div id="app">
    <ul>
        <li>
            <label><input type="text" placeholder="focus & press [v]" @keyup.v="keyUpHandler"></label>
        </li>
        <li>
            <label><input type="text" placeholder="focus & press [silent]" @keyup.media-silent="keyUpHandler"></label>
        </li>
        <li>
            <label><input type="text" placeholder="focus & press [↑|w]" @keyup.forward="keyUpHandler"></label>
        </li>
    </ul>
</div>

<script type="text/javascript">

    Vue.config.keyCodes = {
        v: 86,
        'media-silent': 173,
        forward: [38, 87],
        back: [40, 83],
        left: [37, 65],
        right: [39, 68]
    };

    new Vue({
        el: '#app',
        methods: {
            keyUpHandler(e) {
                console.log(e);
            }
        }
    });
</script>

執行效果：

這里補充一下鍵位碼的對照表：

字母和數字鍵的鍵碼

小鍵盤

功能鍵

控制鍵

多媒體鍵

performance

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

性能這塊做得不是很多，暫時沒有看出如何使用。

productionTip

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

Vue.config.productionTip = false;

如果不設置此屬性，控制臺可以看到vue給出的生產提示：

添加以后就沒有了。

參見原文。
PM 4, July 24, 2019