【譯】Vue 的小奇技（第二篇）：衡量 Vue 應用的執行時效能
特別宣告：本文是作者Alex Jover 釋出在VueDose 上的一個系列。
版權歸作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。
在上一篇文章中我們談到了如何提高大型列表資料的效能，但是我們沒有測試過這個小技巧到底帶來多少的效能優化。
我們可以通過 Chrome 瀏覽器的 DevTools 工具中的 Performance 標籤頁，來完成我們想要的測量工作。為了能夠獲得準確的資料，我們需要在 Vue 應用中開啟「效能追蹤」模式。
我們可以在 main.js 檔案中進行全域性配置，或者在 Nuxt 的場景下，於外掛中進行設定：
Vue.config.performance = true; 複製程式碼
又或者你的環境變數 NODE_NEV 是保持設定準確的話，也可以使用它在非生產環境來開啟「效能追蹤」模式：
const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev; 複製程式碼
以上操作會讓 Vue 內部啟用User Timing API 來對元件進行效能追蹤。
在上一篇文章中，我建立了這個沙箱環境。開啟 Chrome 開發者工具的 Performance 面板，並點選如下這個 reload 按鈕。
它會記錄頁面載入過程的效能，並且由於我們之前在 main.js 設定了 Vue.config.performance ，你在 profiling 中能夠看到 User Timing 的一段。
在這你能夠找到 3 個度量項：
- Init : 建立元件例項所耗時間
- Render : 建立虛擬 DOM 所耗時間
- Patch : 渲染虛擬 DOM 為真實 DOM 所耗時間
繼續，在上一篇文章《[譯] Vue 的小奇技（第一篇）：提高大型資料列表的效能》中，未經優化的元件初始化耗時 417 ms。
而使用 Object.freeze 方法優化過後的元件耗時 3.9 ms。
當然，每次執行的時候耗時資料會有不同，但是兩種情況下的耗時同樣是相差巨大的。當元件在被建立階段，暴露出來的響應式問題，能讓你看到響應式元件和非響應式元件在初始化階段的差異。
本文結束。
你可以線上閱讀這篇原文，裡面有可複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！