国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入了解最新的Vue Devtools v5.0

sumory / 466人閱讀

摘要：讓我們來了解一些新功能和在使用它們在調試過程中的新見解。表示發生，表示事件被觸發，表示路徑發生變化。任何極慢的組件都會在這個左側標簽中脫穎而出，這再次為調查性能問題提供了一個良好的起點。

早些時候發布了Vue devtools 5.0beta版，為已經調試過的強大工具帶來了驚人的新功能。一些新功能包括性能分析，路線跟蹤，Vuex store的實時編輯以及新的設置面板。這些新的功能我覺得是肯定會出來的，在使用它們幾周后，我分享一下對我們最直觀感受的東西。讓我們來了解一些新功能和在使用它們在調試過程中的新見解。

路由

Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標題進行交換。如果您在應用程序中使用vue-router，這些都會提供有用的信息。

歷史視圖有兩個面板。左側面板顯示已經前往的路線的歷史記錄。單擊其中一個歷史記錄條目將在右側面板中顯示該路徑更改的詳細信息。這些詳細信息顯示用戶導航和導航的路線，以及任何伴隨的路線參數。

路由視圖還有兩個面板，左側面板顯示應用程序中所有路徑的映射。單擊其中一條路線將在右側面板中顯示其詳細信息。此處的詳細信息與上一個視圖略有不同，而是顯示路徑，任何子項（嵌套）路由和任何路由參數。

Vuex

Vuex已經是老功能了，但它有一個驚人的新功能; 您現在可以從devtools更新應用程序狀態！

這個功能一直期待已久。在更新之前，改變狀態的過程要繁瑣得多。您必須重新給一個真確的的Mutation以獲得您想要的狀態，或者您必須手動更新Vuex模塊文件中的默認值。現在，您只需單擊任何狀態值，然后從那里更新或刪除。此外，您甚至可以在現有對象上添加新屬性！

性能

與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數”和“組件渲染”。
第一個選項卡“每秒幀數”顯示一個實時源圖表，其中包含應用程序的當前fps。這可用于查找減慢應用程序速度的某些操作或組件。
在下圖中，您可以看到圖表中的第一個紅色凹陷在其頂部有“M”，“E”和“R”圖標。“M”表示發生Mutation，“E”表示事件被觸發，“R”表示路徑發生變化。我們可以預判應用程序的fps會暫時降低路徑變化，但如果這是意外下降，那我們更加容易查出哪些組件消耗了比較多的資源。

“Component Render”選項卡的第二張圖片顯示了組件生命周期方法的詳細運行時間統計信息。左窗格顯示組件的總渲染時間，而右窗格按生命周期方法提供細分。任何極慢的組件都會在這個左側標簽中脫穎而出，這再次為調查性能問題提供了一個良好的起點。

設置

最后但并非最不重要的是，有一個新的設置菜單！目前，此菜單包括以下選項：

將顯示密度更改為更緊湊的布局
規范化組件名稱（my-component將變為MyComponent）
更新主題 - 打開或關閉新的黑暗主題選項

結論

Vue核心團隊及其社區再一次提供了令人驚嘆的開發人員工具體驗。Vue devtools一直是開發人員體驗中不可或缺的一部分，而且這次更新是朝著正確方向發展的巨大推動力。此版本的devtools與最近發布的vue-cli GUI相結合，提供了從創建到完成，令人驚訝的開發體驗。

下載地址

Chrome官方地址(需自備梯子)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99345.html

相關文章

  • 前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

    摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

    sean 評論0 收藏0

  • 前端進階（8） - 前端開發需要了解的工具集合：webpack, eslint, prettier,

    摘要：前端開發需要了解的工具集合前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。 前端開發需要了解的工具集合：webpack, eslint, prettier, ... 前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。 1. nrm: npm...

    SillyMonkey 評論0 收藏0

  • 前端進階（8） - 前端開發需要了解的工具集合：webpack, eslint, prettier,

    摘要：前端開發需要了解的工具集合前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。 前端開發需要了解的工具集合：webpack, eslint, prettier, ... 前端開發需要了解的一些工具，這些工具能夠幫助你在項目開發中事半功倍。 1. nrm: npm...

    zhaochunqi 評論0 收藏0

  • 前端閱讀 - 收藏集 - 掘金

    摘要：實現不定期更新技巧前端掘金技巧，偶爾更新。統一播放效果實現打字效果動畫前端掘金前端開源項目周報前端掘金由出品的前端開源項目周報第四期來啦。 Web 推送技術 - 掘金騰訊云技術社區-掘金主頁持續為大家呈現云計算技術文章，歡迎大家關注！ 作者：villainthr 摘自 前端小吉米 伴隨著今年 Google I/O 大會的召開，一個很火的概念--Progressive Web Apps ...

    lingdududu 評論0 收藏0

  • 正在暑假中的《課多周刊》(第1期)

    摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠上寒山石徑...

    liukai90 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<