早些時候發布了vue devtools 5.0beta版，為已經除錯過的強大工具帶來了驚人的新功能。一些新功能包括效能分析，路線跟蹤，vuex store的實時編輯以及新的設定面板。這些新的功能我覺得是肯定會出來的，在使用它們幾周後，我分享一下對我們最直觀感受的東西。讓我們來了解一些新功能和在使用它們在除錯過程中的新見解。
routing選項卡是devtools套件的全新選項。這裡有兩個不同的檢視，「歷史記錄」和「路徑」，可以通過單擊「路由」選項卡標題進行交換。如果您在應用程式中使用vue-router，這些都會提供有用的資訊。
歷史檢視有兩個面板。左側面板顯示已經前往的路線的歷史記錄。單擊其中乙個歷史記錄條目將在右側面板中顯示該路徑更改的詳細資訊。這些詳細資訊顯示使用者導航和導航的路線，以及任何伴隨的路線引數。
路由檢視還有兩個面板，左側面板顯示應用程式中所有路徑的對映。單擊其中一條路線將在右側面板中顯示其詳細資訊。此處的詳細資訊與上乙個檢視略有不同，而是顯示路徑，任何子項（巢狀）路由和任何路由引數。
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官方位址(需自備梯子)
深入了解最新的Vue Devtools v5 0
早些時候發布了vue devtools 5.0beta版，為已經除錯過的強大工具帶來了驚人的新功能。一些新功能包括效能分析，路線跟蹤，vuex store的實時編輯以及新的設定面板。這些新的功能我覺得是肯定會出來的，在使用它們幾周後，我分享一下對我們最直觀感受的東西。讓我們來了解一些新功能和在使用它...
深入了解A
一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹，如果你還對a 演算法不清楚的話，請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式，使用這個源程式時，應該遵守一定的公約。二 a ...
深入了解A
一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹，如果你還對a 演算法不清楚的話，請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式，使用這個源程式時，應該遵守一定的公約。二 a ...